/* ==========================================================================
   cimentaltmp - Joomla 5.5 template
   Basado en la arquitectura de Cassiopeia
   ========================================================================== */

:root {
	--cimental-color-primary: #0F5C56;
	--cimental-color-accent: #E85D8A;
	--cimental-color-accent-2: #8B6BB1;
	--cimental-color-amber: #D9A441;
	--cimental-color-text: #212529;
	--cimental-color-bg: #ffffff;
	--cimental-color-surface: #f7f7f9;
	--cimental-radius: 1rem;
	--cimental-radius-sm: 0.5rem;
	--cimental-transition: 0.2s ease-in-out;
	--cimental-header-height: 84px;
}

body.cimentaltmp {
	color: var(--cimental-color-text);
	background-color: var(--cimental-color-bg);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	margin: 0;
}

img { max-width: 100%; height: auto; }

.skip-link {
	position: absolute;
	top: -3rem;
	left: 1rem;
	z-index: 1080;
	background: var(--cimental-color-primary);
	color: #fff;
	padding: 0.5rem 1rem;
	border-radius: var(--cimental-radius-sm);
}
.skip-link:focus { top: 1rem; }

/* ==========================================================================
   TOPBAR (redes sociales / utilidades)
   ========================================================================== */
.cimental-topbar {
	background-color: var(--cimental-color-primary);
	color: #fff;
	font-size: 0.85rem;
	padding: 0.35rem 0;
}
.cimental-topbar a {
	color: #fff;
	opacity: 0.9;
	margin-left: 0.9rem;
	text-decoration: none;
}
.cimental-topbar a:hover { opacity: 1; }
.cimental-topbar ul {
	list-style: none;
	display: flex;
	margin: 0;
	padding: 0;
}

/* ==========================================================================
   HEADER: logo + botón hamburguesa
   ========================================================================== */
.cimental-header {
	background-color: #fff;
	padding: 0.75rem 0;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.cimental-header.is-sticky {
	position: sticky;
	top: 0;
	z-index: 1030;
}
.cimental-brand {
	display: flex;
	align-items: center;
	text-decoration: none;
}
.cimental-brand img { max-height: 56px; }
.cimental-sitename {
	font-weight: 800;
	font-size: 1.4rem;
	color: var(--cimental-color-primary);
}

.cimental-hamburger {
	width: 44px;
	height: 44px;
	border: none;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 6px;
	cursor: pointer;
}
.cimental-hamburger span {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background-color: var(--cimental-color-primary);
	transition: transform var(--cimental-transition), opacity var(--cimental-transition);
}
.cimental-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.cimental-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cimental-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* Offcanvas de navegación */
.cimental-offcanvas { width: 320px; }
.cimental-offcanvas .offcanvas-header {
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.cimental-offcanvas ul.menu {
	list-style: none;
	padding: 0;
	margin: 0;
}
.cimental-offcanvas ul.menu li a {
	display: block;
	padding: 0.75rem 0.25rem;
	color: var(--cimental-color-text);
	text-decoration: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	font-weight: 600;
}
.cimental-offcanvas ul.menu li a:hover,
.cimental-offcanvas ul.menu li a.active {
	color: var(--cimental-color-primary);
}
.cimental-offcanvas-search { margin-top: 1.25rem; }

/* ==========================================================================
   SLIDESHOW
   ========================================================================== */
.cimental-slideshow {
	position: relative;
	overflow: hidden;
}
.cimental-slideshow img { width: 100%; display: block; }

/* ==========================================================================
   3 SECCIONES LIBRES (parte superior) — sin contenido forzado.
   El grid se acomoda solo con lo que publiques: 1, 2, 3+ módulos,
   cualquier tipo de contenido (texto, imágenes, artículos, banners...).
   ========================================================================== */
.cimental-free-section {
	padding: 3rem 0;
}
.cimental-free-section--1 { background-color: var(--cimental-color-bg); }
.cimental-free-section--2 { background-color: var(--cimental-color-surface); }
.cimental-free-section--3 { background-color: var(--cimental-color-bg); }

.cimental-free-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	align-items: start;
}

/* Estilo de tarjeta OPCIONAL (elegible por módulo en Avanzado > Estilo del módulo) */
.cimental-card {
	background-color: var(--cimental-color-surface);
	border-radius: var(--cimental-radius);
	padding: 2rem 1.5rem;
	text-align: center;
	transition: transform var(--cimental-transition), box-shadow var(--cimental-transition);
}
.cimental-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}
.cimental-card--teal { background-color: color-mix(in srgb, var(--cimental-color-primary) 10%, white); }
.cimental-card--purple { background-color: color-mix(in srgb, var(--cimental-color-accent-2) 12%, white); }
.cimental-card--amber { background-color: color-mix(in srgb, var(--cimental-color-amber) 14%, white); }

.cimental-card-title {
	font-weight: 800;
	margin: 0.5rem 0;
	font-size: 1.3rem;
}
.cimental-card--teal .cimental-card-title { color: var(--cimental-color-primary); }
.cimental-card--purple .cimental-card-title { color: var(--cimental-color-accent-2); }
.cimental-card--amber .cimental-card-title { color: var(--cimental-color-amber); }

.cimental-card-body { color: var(--cimental-color-text); }
.cimental-card-body a {
	font-weight: 700;
	text-decoration: none;
}
.cimental-card--teal .cimental-card-body a { color: var(--cimental-color-primary); }
.cimental-card--purple .cimental-card-body a { color: var(--cimental-color-accent-2); }
.cimental-card--amber .cimental-card-body a { color: var(--cimental-color-amber); }

/* ==========================================================================
   ÁREA DE CONTENIDO DE JOOMLA
   ========================================================================== */
.cimental-main {
	padding: 2.5rem 0;
}

/* Tarjetas genéricas para main-top / main-bottom (chrome "card" nativo de Joomla) */
.cimentaltmp .card {
	border: none;
	border-radius: var(--cimental-radius-sm);
	background-color: var(--cimental-color-surface);
	margin-bottom: 1.5rem;
}

/* ==========================================================================
   3 SECCIONES LIBRES (parte inferior) — sin contenido forzado.
   Fondos alternos solo para diferenciarlas visualmente; el contenido
   (texto, botones, imágenes, lo que sea) es completamente libre.
   ========================================================================== */
.cimental-free-section-alt { padding: 3rem 0; }
.cimental-free-section-alt--1 { background-color: var(--cimental-color-primary); color: #fff; }
.cimental-free-section-alt--2 { background-color: var(--cimental-color-accent-2); color: #fff; }
.cimental-free-section-alt--3 { background-color: var(--cimental-color-accent); color: #fff; }
.cimental-free-section-alt a { color: #fff; }

/* Estilo de CTA OPCIONAL (elegible por módulo en Avanzado > Estilo del módulo) */
.cimental-cta {
	text-align: center;
	max-width: 720px;
	margin: 0 auto;
}
.cimental-cta-title {
	font-weight: 800;
	font-size: 1.8rem;
	margin-bottom: 0.75rem;
}
.cimental-cta-body a.btn,
.cimental-cta-body .btn {
	background-color: #fff;
	color: var(--cimental-color-primary);
	border: none;
	font-weight: 700;
	border-radius: 999px;
	padding: 0.65rem 1.75rem;
}
.cimental-cta-body a.btn:hover { filter: brightness(0.95); }

/* ==========================================================================
   FOOTER DE 3 COLUMNAS
   ========================================================================== */
.cimental-footer {
	background-color: #0B1F1D;
	color: #d9e2e0;
	padding: 3rem 0 2rem;
}
.cimental-footer-col { margin-bottom: 1.5rem; }
.cimental-footer h3,
.cimental-footer .modtitle {
	color: #fff;
	font-weight: 700;
	font-size: 1.05rem;
	margin-bottom: 0.75rem;
}
.cimental-footer a { color: #d9e2e0; text-decoration: none; }
.cimental-footer a:hover { color: #fff; }
.cimental-footer ul { list-style: none; padding: 0; margin: 0; }
.cimental-footer ul li { margin-bottom: 0.4rem; }

/* ==========================================================================
   BARRA DE COPYRIGHT
   ========================================================================== */
.cimental-copyright {
	background-color: #081513;
	color: #93a5a2;
	font-size: 0.85rem;
	padding: 0.9rem 0;
}
.cimental-copyright a { color: #93a5a2; }
.cimental-copyright a:hover { color: #fff; }

/* ==========================================================================
   Páginas de error / offline
   ========================================================================== */
.error-page h1,
.offline-page h1 { color: var(--cimental-color-primary); }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 767.98px) {
	.cimental-cta-title { font-size: 1.4rem; }
	.cimental-cards-section { padding: 2rem 0; }
}