/*
Theme Name:   Hello Elementor Child – SPUOG
Theme URI:    https://spuog.com.pe/
Description:  Tema hijo de Hello Elementor para el rediseño de SPUOG. Contiene solo estilos complementarios; el contenido se edita en Elementor.
Template:     hello-elementor
Version:      1.0.0
Text Domain:  hello-elementor-child
*/

/* ------------------------------------------------------------------
   Detalles que Elementor no resuelve de forma nativa.
   Colores: variables globales de Elementor (Ajustes del sitio).
   Clases usadas en Elementor (Avanzado > Clases CSS):
     .spuog-waves      ondas decorativas de fondo (contenedores oscuros)
     .spuog-hero-art   fundido lateral de la imagen de portada
     .spuog-card       tarjeta con elevación suave al pasar el cursor
     .spuog-collage    collage de fotografías en abanico
     .spuog-milestones separadores entre hitos
     .spuog-wordmark   palabra "SPUOG" de gran formato del pie
     .spuog-chip       etiquetas (dentro de un editor de texto)
------------------------------------------------------------------- */

:root {
	--spuog-ease: cubic-bezier(.2, .7, .2, 1);
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 96px;
}

html,
body {
	overflow-x: clip; /* evita desplazamiento lateral sin romper la cabecera fija */
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Palabras largas (correos, URLs) no deben desbordar en pantallas estrechas */
a[href^="mailto:"],
.elementor-icon-list-text {
	overflow-wrap: anywhere;
}

.elementor-heading-title {
	overflow-wrap: break-word;
}

/* Zonas táctiles cómodas en enlaces de contacto y migas de pan */
a[href^="tel:"]:not(.e-con),
a[href^="mailto:"]:not(.e-con) {
	display: inline-block;
	padding-block: 6px;
}

/* En listas con iconos el espaciado lo da la propia lista */
.elementor-icon-list-item > a[href^="tel:"],
.elementor-icon-list-item > a[href^="mailto:"] {
	display: flex;
	padding-block: 0;
}

/* Pie: iconos de ancho fijo para que todos los textos arranquen alineados */
.spuog-footer-list .elementor-icon-list-icon {
	width: 18px;
	justify-content: flex-start;
	flex: none;
	margin: 0 !important;
}

.spuog-footer-list .elementor-icon-list-icon svg {
	flex: none;
	width: var(--e-icon-list-icon-size, 14px) !important;
	height: var(--e-icon-list-icon-size, 14px) !important;
}

.spuog-footer-list .elementor-icon-list-item a:hover .elementor-icon-list-text {
	color: var(--e-global-color-secondary, #7054B3);
}

/* Dentro de un párrafo, el enlace no debe alterar el interlineado */
p a[href^="tel:"],
p a[href^="mailto:"],
li a[href^="mailto:"] {
	display: inline;
	padding-block: 0;
}

.elementor-widget-breadcrumbs a {
	display: inline-block;
	padding-block: 8px;
}

/* Paginación de noticias */
.elementor-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
}

.elementor-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	margin: 0 !important;
	padding: 0 14px;
	border: 1px solid var(--e-global-color-spborder, #E3DEF0);
	border-radius: 999px;
	text-decoration: none;
}

.elementor-pagination .page-numbers.current {
	border-color: var(--e-global-color-secondary, #7054B3);
	background: var(--e-global-color-secondary, #7054B3);
	color: #fff !important;
}

.elementor-pagination a.page-numbers:hover {
	border-color: var(--e-global-color-secondary, #7054B3);
}

/* Filtro de categorías: deslizable en móvil sin barra visible */
.e-filter {
	scrollbar-width: none;
}

.e-filter::-webkit-scrollbar {
	display: none;
}

.e-filter-item {
	min-height: 40px;
	white-space: nowrap;
}

@media (max-width: 767px) {
	/* Acordeones: título algo más compacto */
	.e-n-accordion-item-title-text {
		font-size: 16px;
	}

	/* Migas de pan: en móvil se omite el título actual (ya está en el H1) */
	.elementor-widget-breadcrumbs .breadcrumb_last,
	.elementor-widget-breadcrumbs .spuog-bc-sep:has(+ .breadcrumb_last) {
		display: none;
	}

	/* Pie en móvil: marca y contacto a todo el ancho; enlaces y redes lado a lado */
	.spuog-footer-grid > .e-con:nth-child(1) { grid-column: 1 / -1; order: 1; }
	.spuog-footer-grid > .e-con:nth-child(2) { order: 2; }
	.spuog-footer-grid > .e-con:nth-child(4) { order: 3; }
	.spuog-footer-grid > .e-con:nth-child(3) { grid-column: 1 / -1; order: 4; }

	/* Hitos en tres columnas: textos breves y centrados */
	.spuog-milestones .elementor-widget-text-editor {
		font-size: 12px;
		line-height: 1.35;
		hyphens: auto;
		-webkit-hyphens: auto;
	}
}

a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible {
	outline: 3px solid #B9A6F2;
	outline-offset: 3px;
	border-radius: 6px;
}

/* Ondas de ultrasonido ------------------------------------------- */
.spuog-waves {
	position: relative;
	isolation: isolate;
}

.spuog-waves::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: url("assets/img/ondas-ultrasonido.svg") center / cover no-repeat;
	opacity: .9;
}

.spuog-waves--soft::before {
	opacity: .45;
}

/* Imagen de portada: fundido hacia el fondo oscuro ---------------- */
.spuog-hero-art img {
	-webkit-mask-image: radial-gradient(ellipse 62% 64% at 58% 50%, #000 52%, transparent 100%);
	mask-image: radial-gradient(ellipse 62% 64% at 58% 50%, #000 52%, transparent 100%);
}

/* Tarjetas ------------------------------------------------------- */
.spuog-card {
	transition: transform .35s var(--spuog-ease), box-shadow .35s var(--spuog-ease), border-color .35s var(--spuog-ease);
}

a.spuog-card:hover,
.spuog-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -18px rgba(41, 35, 92, .35);
}

.spuog-card .elementor-icon {
	transition: transform .35s var(--spuog-ease);
}

a.spuog-card:hover .spuog-arrow .elementor-icon {
	transform: translateX(4px);
}

/* Etiquetas ------------------------------------------------------ */
.spuog-chip {
	display: inline-block;
	margin: 4px 6px 0 0;
	padding: 5px 10px;
	border-radius: 999px;
	background: var(--e-global-color-accent, #F2EFF8);
	color: var(--e-global-color-primary, #29235C);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
}

/* Collage en abanico --------------------------------------------- */
.spuog-collage > .elementor-widget-image {
	transition: transform .4s var(--spuog-ease);
}

.spuog-collage > .elementor-widget-image img {
	box-shadow: 0 20px 40px -20px rgba(11, 16, 38, .45);
}

@media (min-width: 768px) {
	.spuog-collage > .elementor-widget-image:nth-child(1) { transform: perspective(900px) rotateY(18deg) rotate(-4deg) translateY(18px); }
	.spuog-collage > .elementor-widget-image:nth-child(2) { transform: perspective(900px) rotateY(9deg) rotate(-2deg) translateY(4px); }
	.spuog-collage > .elementor-widget-image:nth-child(3) { transform: none; z-index: 2; }
	.spuog-collage > .elementor-widget-image:nth-child(4) { transform: perspective(900px) rotateY(-9deg) rotate(2deg) translateY(4px); }
	.spuog-collage > .elementor-widget-image:nth-child(5) { transform: perspective(900px) rotateY(-18deg) rotate(4deg) translateY(18px); }
}

/* Hitos ---------------------------------------------------------- */
@media (min-width: 768px) {
	.spuog-milestones > .e-con + .e-con {
		border-left: 1px solid var(--e-global-color-spborder, #E3DEF0);
	}
}

/* Palabra SPUOG del pie ------------------------------------------ */
.spuog-wordmark .elementor-heading-title {
	background: linear-gradient(180deg, rgba(185, 166, 242, .55) 0%, rgba(185, 166, 242, .08) 85%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	white-space: nowrap;
}

/* Blog: tarjetas de noticias ------------------------------------- */
.spuog-news-card {
	height: 100%;
	color: inherit;
}

.spuog-news-card .elementor-widget-image {
	overflow: hidden;
}

.spuog-news-card .elementor-widget-image img {
	transition: transform .5s var(--spuog-ease);
}

a.spuog-news-card:hover .elementor-widget-image img {
	transform: scale(1.03);
}

/* Blog: contenido de la entrada (editor de WordPress) ------------- */
.spuog-prose {
	font-size: 18px;
	line-height: 1.75;
}

.spuog-prose > * + * {
	margin-top: 1.1em;
}

.spuog-prose h2,
.spuog-prose h3,
.spuog-prose h4 {
	margin-top: 1.8em;
	margin-bottom: .5em;
	font-family: Manrope, sans-serif;
	font-weight: 700;
	line-height: 1.25;
	color: var(--e-global-color-primary, #29235C);
}

.spuog-prose h2 { font-size: 30px; }
.spuog-prose h3 { font-size: 24px; }
.spuog-prose h4 { font-size: 20px; }

.spuog-prose a {
	color: var(--e-global-color-secondary, #7054B3);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.spuog-prose ul,
.spuog-prose ol {
	padding-left: 1.3em;
}

.spuog-prose li + li {
	margin-top: .4em;
}

.spuog-prose li::marker {
	color: var(--e-global-color-secondary, #7054B3);
}

.spuog-prose img,
.spuog-prose figure {
	max-width: 100%;
	height: auto;
	border-radius: 14px;
}

.spuog-prose blockquote {
	margin: 1.6em 0;
	padding: 18px 24px;
	border-left: 4px solid var(--e-global-color-secondary, #7054B3);
	border-radius: 0 12px 12px 0;
	background: var(--e-global-color-accent, #F2EFF8);
	color: var(--e-global-color-primary, #29235C);
}

.spuog-prose table {
	width: 100%;
	border-collapse: collapse;
	font-size: 16px;
}

.spuog-prose th,
.spuog-prose td {
	padding: 10px 12px;
	border: 1px solid var(--e-global-color-spborder, #E3DEF0);
	text-align: left;
}

@media (max-width: 767px) {
	.spuog-prose { font-size: 17px; }
	.spuog-prose h2 { font-size: 25px; }
	.spuog-prose h3 { font-size: 21px; }
}

/* Migas de pan sobre fondo oscuro */
.elementor-widget-breadcrumbs a {
	text-decoration: none;
}

/* Acordeones: cada elemento es una sola tarjeta (título + contenido) */
.spuog-accordion .e-n-accordion-item {
	border: 1px solid var(--e-global-color-spborder, #E3DEF0);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
	transition: border-color .25s, box-shadow .25s;
}

.spuog-accordion .e-n-accordion-item:hover {
	border-color: #CFC6E8;
}

.spuog-accordion .e-n-accordion-item[open] {
	border-color: rgba(112, 84, 179, .45);
	box-shadow: 0 14px 32px -22px rgba(41, 35, 92, .45);
}

.spuog-accordion .e-n-accordion-item > .e-n-accordion-item-title {
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
}

.spuog-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title {
	background: var(--e-global-color-accent, #F2EFF8) !important;
}

.spuog-accordion .e-n-accordion-item > [role="region"] {
	padding: 18px 22px 22px !important;
	border: 0 !important;
	border-top: 1px solid var(--e-global-color-spborder, #E3DEF0) !important;
	border-radius: 0 !important;
	background: #fff !important;
}

.spuog-acc-text p {
	margin-bottom: 0;
	line-height: 1.65;
}

.spuog-acc-text p + p {
	margin-top: .8em;
}

/* Lista cargo / nombre (juntas directivas) */
.spuog-roster {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.spuog-roster li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-bottom: 12px;
	border-bottom: 1px dashed var(--e-global-color-spborder, #E3DEF0);
}

.spuog-roster span {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--e-global-color-secondary, #7054B3);
}

.spuog-roster strong {
	font-family: Manrope, Inter, sans-serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--e-global-color-primary, #29235C);
}

@media (max-width: 767px) {
	.spuog-accordion .e-n-accordion-item > [role="region"] {
		padding: 16px 18px 18px !important;
	}

	.spuog-roster {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* Próxima actividad (shortcode [spuog_proxima_actividad]) --------- */
.spuog-ev {
	--ev-lilac: var(--e-global-color-splilac, #B9A6F2);
	--ev-muted: var(--e-global-color-spmutedlight, #C9C5E3);
	color: #fff;
	font-family: Inter, sans-serif;
}

.spuog-ev p { margin: 0; }

.spuog-ev__icon {
	flex: none;
	width: 20px;
	height: 20px;
	color: var(--ev-lilac);
}

.spuog-ev__eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--ev-lilac);
}

.spuog-ev .spuog-ev__title {
	margin: 2px 0 0;
	font-family: Manrope, sans-serif;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff !important; /* por encima del color de títulos del kit */
}

.spuog-ev__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 8px;
	margin-top: 6px !important;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ev-muted);
}

.spuog-ev__meta span:first-child::first-letter { text-transform: uppercase; }
.spuog-ev__dot { color: var(--ev-lilac); }
.spuog-ev__text { font-size: 14px; line-height: 1.5; color: #fff; }

.spuog-ev__head {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.spuog-ev__countdown {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 8px;
	margin-top: 16px;
}

.spuog-ev__countdown[hidden],
.spuog-ev__live[hidden] { display: none; }

.spuog-ev__tile {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 10px 4px;
	border: 1px solid rgba(185, 166, 242, .22);
	border-radius: 12px;
	background: rgba(255, 255, 255, .05);
}

.spuog-ev__num {
	font-family: Manrope, sans-serif;
	font-size: 26px;
	font-weight: 800;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: #fff;
}

.spuog-ev__unit {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--ev-lilac);
}

.spuog-ev__live {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px !important;
	font-weight: 600;
	color: #fff;
}

.spuog-ev__pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: #4ADE80;
	box-shadow: 0 0 0 0 rgba(74, 222, 128, .6);
	animation: spuog-pulse 1.8s infinite;
}

@keyframes spuog-pulse {
	70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
	100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}

.spuog-ev__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 40px;
	margin-top: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ev-lilac) !important;
	text-decoration: none;
}

.spuog-ev__link:hover { color: #fff !important; }

/* Variante compacta (Inicio): caja con borde */
.spuog-ev--compact {
	max-width: 400px;
	padding: 16px 20px;
	border: 1px solid rgba(185, 166, 242, .28);
	border-radius: 14px;
	background: rgba(255, 255, 255, .04);
}

.spuog-ev--compact.spuog-ev--pending {
	display: flex;
	align-items: center;
	gap: 14px;
	max-width: 300px;
}

/* Variante ancha (Eventos): dentro de la tarjeta oscura */
.spuog-ev--wide .spuog-ev__icon { width: 28px; height: 28px; margin-top: 2px; }
.spuog-ev--wide.spuog-ev--pending { display: flex; gap: 18px; align-items: flex-start; }
.spuog-ev--wide .spuog-ev__title { font-size: 22px; }
.spuog-ev--wide.spuog-ev--pending .spuog-ev__title { margin: 0 0 6px; }
.spuog-ev--wide .spuog-ev__text { font-size: 16px; line-height: 1.6; color: var(--ev-muted); }
.spuog-ev--wide .spuog-ev__countdown { max-width: 440px; margin-left: 42px; }
.spuog-ev--wide .spuog-ev__num { font-size: 30px; }
.spuog-ev--wide .spuog-ev__live,
.spuog-ev--wide .spuog-ev__link { margin-left: 42px; }

@media (max-width: 767px) {
	.spuog-ev--compact { max-width: none; }
	.spuog-ev__num { font-size: 22px; }
	.spuog-ev--wide .spuog-ev__countdown,
	.spuog-ev--wide .spuog-ev__live,
	.spuog-ev--wide .spuog-ev__link { margin-left: 0; }
	.spuog-ev--wide .spuog-ev__title { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
	.spuog-ev__pulse { animation: none; }
}

/* Menú: elemento actual ------------------------------------------ */
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu--main .current-menu-ancestor > .elementor-item {
	color: var(--e-global-color-secondary, #7054B3) !important;
}

/* Movimiento reducido -------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}

	.elementor-invisible {
		visibility: visible !important;
	}

	a.spuog-card:hover,
	.spuog-card:hover {
		transform: none;
	}
}

/* Contacto: en pantallas muy estrechas la fila completa ya es el enlace; se omite la flecha */
@media (max-width: 380px) {
	.spuog-contact-row .spuog-arrow {
		display: none;
	}
}

@media (max-width: 340px) {
	.spuog-contact-value .elementor-heading-title {
		font-size: 14px !important;
	}
}