/*
 * soporte.css
 * Página pública /soporte/ — hero degradado (misma línea de instaladores.css
 * y conocenos.css) + acordeón de preguntas frecuentes con <details>/<summary>
 * nativos (mismo criterio del árbol de filtro de catalogo-instalador.css:
 * cero JS, marcador nativo oculto y chevron propio por CSS).
 */

.saes-soporte { overflow-x: hidden; }

/*
 * .saes-seccion-kicker / .saes-seccion-header / .saes-seccion-titulo son la
 * "sección genérica" del sistema de diseño (mismo patrón que usa
 * front-page.php), pero solo están definidas en inicio.css, que no se carga
 * en esta página (ver inc/enqueue.php: inicio.css es exclusivo de
 * is_front_page()). Se redefinen aquí, idénticas, para que se vean igual sin
 * depender de que inicio.css esté cargado.
 */
.saes-seccion-kicker {
	display: block;
	text-transform: uppercase;
	letter-spacing: .12em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-primario);
	margin-bottom: .5rem;
}
.saes-seccion-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--espacio-xs);
	margin-bottom: var(--espacio-md);
	padding-bottom: var(--espacio-sm);
	border-bottom: 1px solid var(--color-borde);
}
.saes-seccion-titulo {
	font-size: clamp(1.6rem, 3vw + 1rem, 2.5rem);
	text-transform: uppercase;
	letter-spacing: -.01em;
	margin-bottom: 0;
}

/* ─── Hero ─── */
.saes-soporte-hero {
	background: linear-gradient(160deg, var(--color-secundario), var(--color-primario));
	color: #fff;
	padding-block: var(--espacio-2xl);
	text-align: center;
}
.saes-soporte-hero__inner { max-width: 680px; margin-inline: auto; }
.saes-soporte-hero__kicker {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: .1em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--color-dorado);
	margin-bottom: .6rem;
}
.saes-soporte-hero h1 { color: #fff; font-size: clamp(1.8rem, 4vw, 2.6rem); margin: 0 0 var(--espacio-sm); }
.saes-soporte-hero p { color: rgba(255,255,255,.8); font-size: 1.05rem; margin: 0; }

/* ─── FAQ (acordeón <details>/<summary>) ─── */
.saes-soporte-faq { padding-block: var(--espacio-2xl); }
.saes-soporte-faq__lista {
	max-width: 780px;
	margin: var(--espacio-lg) auto 0;
	display: flex;
	flex-direction: column;
	gap: var(--espacio-sm);
}

.saes-faq-item {
	background: var(--color-fondo-alterno);
	border: 1px solid var(--color-borde);
	border-radius: var(--radio-md);
	padding: 0 var(--espacio-md);
	overflow: hidden;
}
.saes-faq-item summary {
	cursor: pointer;
	list-style: none;
	padding: var(--espacio-sm) 0;
	font-family: var(--fuente-titulos);
	font-weight: 600;
	font-size: 1rem;
	color: var(--color-secundario);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espacio-sm);
}
.saes-faq-item summary::-webkit-details-marker { display: none; }
.saes-faq-item summary::after {
	content: '';
	flex: none;
	width: 9px; height: 9px;
	border-right: 2px solid var(--color-primario);
	border-bottom: 2px solid var(--color-primario);
	transform: rotate(45deg);
	transition: transform var(--transicion);
}
.saes-faq-item[open] summary::after { transform: rotate(-135deg); }
.saes-faq-item[open] summary { border-bottom: 1px solid var(--color-borde); }

.saes-faq-item__respuesta { padding: var(--espacio-sm) 0 var(--espacio-md); }
.saes-faq-item__respuesta p {
	color: var(--color-texto-suave);
	font-size: .95rem;
	line-height: 1.7;
	margin: 0;
}
.saes-faq-item__respuesta a { font-weight: 600; }

/* ─── CTA final ─── */
.saes-soporte-cta { background: var(--color-secundario); padding-block: var(--espacio-2xl); text-align: center; }
.saes-soporte-cta__inner { max-width: 560px; margin-inline: auto; }
.saes-soporte-cta h2 { color: #fff; margin: 0 0 .6rem; }
.saes-soporte-cta p { color: rgba(255,255,255,.75); margin: 0 0 var(--espacio-md); }
.saes-soporte-cta__acciones { display: flex; gap: var(--espacio-sm); justify-content: center; flex-wrap: wrap; }
.saes-soporte-cta__boton-claro { border-color: rgba(255,255,255,.6); color: #fff; }
.saes-soporte-cta__boton-claro:hover { background: rgba(255,255,255,.12); }