/*
 * Estilos para la ficha individual de País.
 *
 * Diseñado con mentalidad editorial: hero dominante, jerarquía
 * tipográfica clara, secciones generosamente espaciadas, normativas
 * agrupadas por década en cards.
 *
 * Reusa variables CSS de frontend.css. Las propiedades estructurales
 * llevan doble clase + !important para defenderse del cascade del theme.
 */

@layer obsead {

	.obsead-pais.obsead-pais {
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 !important;
		color: var(--obsead-color-navy);
		font-family: var(--obsead-font-family);
		line-height: 1.65;
		display: block !important;
	}

	/* ----------------------------------------------------------------
	 * HERO
	 * ---------------------------------------------------------------- */
	.obsead-pais__hero.obsead-pais__hero {
		background: linear-gradient( 180deg, #f6f7f9 0%, #ffffff 100% );
		padding: 64px 24px 48px !important;
		margin: 0 !important;
		border-bottom: 1px solid #e6e6ea;
	}
	.obsead-pais__hero-inner.obsead-pais__hero-inner {
		max-width: 1080px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
		display: grid !important;
		grid-template-columns: 160px 1fr auto;
		gap: 32px 40px;
		align-items: center;
	}
	.obsead-pais__avatar.obsead-pais__avatar {
		width: 160px !important;
		height: 160px !important;
		border-radius: 50% !important;
		overflow: hidden !important;
		background: #f4f4f6;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
		margin: 0 !important;
		padding: 0 !important;
		grid-row: 1 / span 2;
	}
	.obsead-pais__avatar img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		display: block !important;
		max-width: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	.obsead-pais__avatar--initial {
		background:
			radial-gradient( circle at 30% 25%, rgba(255,255,255,0.3), transparent 60% ),
			var(--obsead-color-primary) !important;
	}
	.obsead-pais__avatar--initial span {
		font-size: 80px !important;
		font-weight: 700 !important;
		color: #fff !important;
		line-height: 1 !important;
		font-family: inherit !important;
	}

	.obsead-pais__hero-meta {
		min-width: 0;
	}
	.obsead-pais__eyebrow.obsead-pais__eyebrow {
		margin: 0 0 8px !important;
		padding: 0 !important;
		font-size: 12px !important;
		font-weight: 600 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.12em !important;
		color: var(--obsead-color-primary) !important;
		line-height: 1.3 !important;
	}
	.obsead-pais__title.obsead-pais__title {
		margin: 0 0 12px !important;
		padding: 0 !important;
		font-size: clamp( 36px, 5vw, 56px ) !important;
		font-weight: 800 !important;
		line-height: 1.05 !important;
		color: var(--obsead-color-navy) !important;
		letter-spacing: -0.02em !important;
		text-transform: none !important;
	}
	.obsead-pais__years.obsead-pais__years {
		margin: 0 0 6px !important;
		padding: 0 !important;
		font-size: 22px !important;
		font-weight: 700 !important;
		color: var(--obsead-color-primary) !important;
		letter-spacing: 0.04em !important;
		line-height: 1.2 !important;
	}
	.obsead-pais__iso.obsead-pais__iso {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: #6c6c70 !important;
		letter-spacing: 0.16em !important;
	}

	.obsead-pais__hero-cta {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		gap: 18px;
		grid-column: 3;
		grid-row: 1;
	}
	a.obsead-pais__cta.obsead-pais__cta {
		display: inline-block !important;
		padding: 12px 22px !important;
		margin: 0 !important;
		background: var(--obsead-color-primary) !important;
		color: #fff !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		text-decoration: none !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		border-radius: 6px !important;
		border: 0 !important;
		box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
		transition: filter 120ms ease, transform 120ms ease;
	}
	a.obsead-pais__cta.obsead-pais__cta:hover,
	a.obsead-pais__cta.obsead-pais__cta:focus {
		filter: brightness(0.9);
		color: #fff !important;
		transform: translateY(-1px);
	}
	.obsead-pais__hero-stats {
		display: flex;
		gap: 24px;
	}
	.obsead-pais__stat {
		text-align: right;
	}
	.obsead-pais__stat-num {
		display: block;
		font-size: 28px;
		font-weight: 800;
		color: var(--obsead-color-navy);
		line-height: 1;
		letter-spacing: -0.02em;
	}
	.obsead-pais__stat-label {
		display: block;
		font-size: 11px;
		font-weight: 600;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		color: #6c6c70;
		margin-top: 4px;
	}

	/* ----------------------------------------------------------------
	 * SECTIONS
	 * ---------------------------------------------------------------- */
	.obsead-pais__section.obsead-pais__section {
		padding: 64px 24px !important;
		margin: 0 !important;
		background: #ffffff;
		display: block !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.obsead-pais__section--alt.obsead-pais__section--alt {
		background: #f6f7f9;
	}
	.obsead-pais__section-inner.obsead-pais__section-inner {
		max-width: 760px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding: 0 !important;
		width: 100% !important;
		box-sizing: border-box !important;
	}
	.obsead-pais__section-head {
		margin-bottom: 32px;
	}
	.obsead-pais__kicker.obsead-pais__kicker {
		display: inline-block !important;
		font-size: 11px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.14em !important;
		color: var(--obsead-color-primary) !important;
		margin: 0 0 8px !important;
		padding: 0 !important;
		line-height: 1.3 !important;
	}
	.obsead-pais__section-head h2.obsead-pais__section-head,
	.obsead-pais__section-head h2 {
		margin: 0 !important;
		padding: 0 !important;
		font-size: clamp( 26px, 3.4vw, 34px ) !important;
		font-weight: 700 !important;
		line-height: 1.2 !important;
		color: var(--obsead-color-navy) !important;
		letter-spacing: -0.01em !important;
		text-transform: none !important;
	}
	.obsead-pais__deck.obsead-pais__deck {
		margin: 12px 0 0 !important;
		padding: 0 !important;
		font-size: 16px !important;
		line-height: 1.55 !important;
		color: #4a4a4a !important;
		font-weight: 400 !important;
	}

	/* Prosa */
	.obsead-pais__prose {
		font-size: 17px;
		line-height: 1.75;
		color: #2b2b2b;
	}
	.obsead-pais__prose--lead {
		font-size: 18px;
	}
	.obsead-pais__prose p {
		margin: 0 0 16px !important;
	}
	.obsead-pais__prose p:last-child {
		margin-bottom: 0 !important;
	}
	.obsead-pais__prose strong, .obsead-pais__prose b {
		color: var(--obsead-color-navy);
	}

	/* Inovação + Desafios — split de dos columnas */
	.obsead-pais__split {
		display: grid;
		grid-template-columns: repeat( auto-fit, minmax(300px, 1fr) );
		gap: 24px;
	}
	.obsead-pais__panel.obsead-pais__panel {
		padding: 28px !important;
		margin: 0 !important;
		background: #fff !important;
		border: 1px solid #e6e6ea !important;
		border-top: 4px solid var(--obsead-color-primary) !important;
		border-radius: 8px !important;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
	}
	.obsead-pais__panel--inovacao.obsead-pais__panel--inovacao { border-top-color: var(--obsead-color-primary) !important; }
	.obsead-pais__panel--desafios.obsead-pais__panel--desafios { border-top-color: var(--obsead-color-primary) !important; opacity: 0.95; }
	.obsead-pais__panel h3.obsead-pais__panel,
	.obsead-pais__panel h3 {
		margin: 0 0 14px !important;
		padding: 0 !important;
		font-size: 18px !important;
		font-weight: 700 !important;
		color: var(--obsead-color-navy) !important;
		line-height: 1.3 !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	.obsead-pais__panel .obsead-pais__prose {
		font-size: 15px;
		line-height: 1.6;
	}

	/* ----------------------------------------------------------------
	 * MARCOS HISTÓRICOS — timeline editorial
	 * ---------------------------------------------------------------- */
	.obsead-pais__hitos.obsead-pais__hitos {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.obsead-pais__hito.obsead-pais__hito {
		display: grid !important;
		grid-template-columns: 110px 1fr;
		gap: 32px;
		align-items: start;
		padding: 24px 0 !important;
		margin: 0 !important;
		border-top: 1px solid #e6e6ea;
		list-style: none !important;
	}
	.obsead-pais__hitos > li:first-child.obsead-pais__hito {
		border-top: 0;
		padding-top: 0;
	}
	.obsead-pais__hito-anio {
		font-size: 36px !important;
		font-weight: 800 !important;
		color: var(--obsead-color-primary) !important;
		line-height: 1 !important;
		letter-spacing: -0.02em;
	}
	.obsead-pais__hito-desc.obsead-pais__hito-desc {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 17px !important;
		line-height: 1.6 !important;
		color: #2b2b2b !important;
	}

	/* ----------------------------------------------------------------
	 * NORMATIVAS — agrupadas por década, cards editoriales
	 * ---------------------------------------------------------------- */
	.obsead-pais__decade {
		margin-top: 40px;
	}
	.obsead-pais__decade:first-of-type {
		margin-top: 0;
	}
	.obsead-pais__decade-title.obsead-pais__decade-title {
		display: flex !important;
		align-items: center !important;
		gap: 14px !important;
		margin: 0 0 20px !important;
		padding: 0 0 12px !important;
		font-size: 14px !important;
		font-weight: 700 !important;
		text-transform: uppercase !important;
		letter-spacing: 0.12em !important;
		color: #6c6c70 !important;
		border-bottom: 2px solid #e6e6ea !important;
		line-height: 1.3 !important;
	}
	.obsead-pais__decade-count {
		display: inline-block;
		padding: 2px 10px;
		background: var(--obsead-color-primary);
		color: #fff;
		font-size: 11px;
		font-weight: 700;
		border-radius: 999px;
		letter-spacing: 0.04em;
	}

	.obsead-pais__normativas.obsead-pais__normativas {
		list-style: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		flex-direction: column;
		gap: 16px;
	}
	.obsead-pais__normativa.obsead-pais__normativa {
		display: grid !important;
		grid-template-columns: 160px 1fr;
		gap: 28px;
		padding: 24px 0 !important;
		margin: 0 !important;
		border-top: 1px solid #e6e6ea;
		list-style: none !important;
	}
	.obsead-pais__normativas > li:first-child {
		border-top: 0;
		padding-top: 4px;
	}
	.obsead-pais__normativa-meta {
		min-width: 0;
	}
	.obsead-pais__normativa-date.obsead-pais__normativa-date {
		display: inline-block !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: #6c6c70 !important;
		line-height: 1.4 !important;
	}
	.obsead-pais__normativa-body {
		min-width: 0;
	}
	.obsead-pais__normativa-title.obsead-pais__normativa-title {
		margin: 0 0 8px !important;
		padding: 0 !important;
		font-size: 19px !important;
		font-weight: 700 !important;
		line-height: 1.3 !important;
		color: var(--obsead-color-navy) !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
	}
	.obsead-pais__normativa-title a {
		color: inherit !important;
		text-decoration: none !important;
		border-bottom: 1px solid transparent;
		transition: border-color 120ms ease;
	}
	.obsead-pais__normativa-title a:hover,
	.obsead-pais__normativa-title a:focus {
		color: var(--obsead-color-primary) !important;
		border-bottom-color: var(--obsead-color-primary);
	}
	.obsead-pais__normativa-desc.obsead-pais__normativa-desc {
		margin: 0 !important;
		padding: 0 !important;
		font-size: 15px !important;
		line-height: 1.65 !important;
		color: #4a4a4a !important;
	}
	a.obsead-pais__normativa-link.obsead-pais__normativa-link {
		display: inline-block !important;
		margin-top: 10px !important;
		padding: 0 !important;
		font-size: 13px !important;
		font-weight: 600 !important;
		color: var(--obsead-color-primary) !important;
		text-decoration: none !important;
		text-transform: none !important;
		letter-spacing: 0 !important;
		border: 0 !important;
		background: transparent !important;
	}
	a.obsead-pais__normativa-link.obsead-pais__normativa-link:hover,
	a.obsead-pais__normativa-link.obsead-pais__normativa-link:focus {
		color: var(--obsead-color-primary-dark) !important;
		text-decoration: underline !important;
	}

	/* ----------------------------------------------------------------
	 * FOOTER
	 * ---------------------------------------------------------------- */
	.obsead-pais__footer {
		padding: 48px 24px 64px;
		background: #f6f7f9;
		border-top: 1px solid #e6e6ea;
	}
	.obsead-pais__footer-inner {
		max-width: 760px;
		margin: 0 auto;
	}
	a.obsead-pais__back.obsead-pais__back {
		display: inline-block !important;
		font-size: 14px !important;
		font-weight: 600 !important;
		color: var(--obsead-color-primary) !important;
		text-decoration: none !important;
		padding: 10px 0 !important;
		margin: 0 !important;
	}
	a.obsead-pais__back.obsead-pais__back:hover,
	a.obsead-pais__back.obsead-pais__back:focus {
		text-decoration: underline !important;
	}

	/* ----------------------------------------------------------------
	 * MOBILE & TABLET (<= 768px)
	 *
	 * El hero pasa de grid 3 columnas a una sola columna apilada en
	 * orden lógico: avatar → meta (eyebrow/título/anos/iso) → cta/stats.
	 * Todos los wrappers vuelven a width:100% para que ningún max-width
	 * heredado haga overflow horizontal.
	 * ---------------------------------------------------------------- */
	@media (max-width: 768px) {
		.obsead-pais__hero.obsead-pais__hero {
			padding: 36px 20px 32px !important;
		}
		.obsead-pais__hero-inner.obsead-pais__hero-inner {
			grid-template-columns: 1fr !important;
			gap: 20px !important;
			text-align: left !important;
			max-width: 100% !important;
		}
		.obsead-pais__avatar.obsead-pais__avatar {
			width: 120px !important;
			height: 120px !important;
			grid-row: auto !important;
			grid-column: 1 !important;
			margin: 0 0 4px 0 !important;
		}
		.obsead-pais__avatar--initial.obsead-pais__avatar--initial span {
			font-size: 60px !important;
		}
		.obsead-pais__hero-meta {
			grid-row: auto !important;
			grid-column: 1 !important;
		}
		.obsead-pais__title.obsead-pais__title {
			font-size: 32px !important;
			line-height: 1.1 !important;
		}
		.obsead-pais__years.obsead-pais__years {
			font-size: 18px !important;
		}
		.obsead-pais__hero-cta {
			grid-column: 1 !important;
			grid-row: auto !important;
			align-items: flex-start !important;
			width: 100% !important;
			gap: 16px !important;
		}
		a.obsead-pais__cta.obsead-pais__cta {
			width: 100% !important;
			text-align: center !important;
			padding: 14px 22px !important;
		}
		.obsead-pais__hero-stats {
			justify-content: flex-start !important;
			gap: 32px !important;
			width: 100%;
			padding-top: 8px;
			border-top: 1px solid #e6e6ea;
		}
		.obsead-pais__stat {
			text-align: left !important;
		}
		.obsead-pais__stat-num {
			font-size: 24px;
		}

		.obsead-pais__section.obsead-pais__section {
			padding: 36px 20px !important;
		}
		.obsead-pais__section-head {
			margin-bottom: 22px !important;
		}
		.obsead-pais__section-head h2.obsead-pais__section-head,
		.obsead-pais__section-head h2 {
			font-size: 22px !important;
		}

		.obsead-pais__prose,
		.obsead-pais__prose--lead {
			font-size: 16px !important;
			line-height: 1.7 !important;
		}

		/* Inovação + Desafios: una sola columna, panels a ancho completo */
		.obsead-pais__split {
			grid-template-columns: 1fr !important;
			gap: 16px !important;
		}
		.obsead-pais__panel.obsead-pais__panel {
			padding: 20px !important;
		}

		/* Marcos históricos: año arriba, descripción debajo */
		.obsead-pais__hito.obsead-pais__hito {
			grid-template-columns: 1fr !important;
			gap: 6px !important;
			padding: 18px 0 !important;
		}
		.obsead-pais__hito-anio {
			font-size: 28px !important;
		}

		/* Normativas: fecha como pequeña línea encima, no columna lateral */
		.obsead-pais__normativa.obsead-pais__normativa {
			grid-template-columns: 1fr !important;
			gap: 4px !important;
			padding: 18px 0 !important;
		}
		.obsead-pais__normativa-meta {
			margin-bottom: 2px;
		}
		.obsead-pais__normativa-date.obsead-pais__normativa-date {
			font-size: 12px !important;
			text-transform: uppercase !important;
			letter-spacing: 0.04em !important;
			color: var(--obsead-color-primary) !important;
		}
		.obsead-pais__normativa-title.obsead-pais__normativa-title {
			font-size: 17px !important;
			line-height: 1.35 !important;
		}
		.obsead-pais__decade-title.obsead-pais__decade-title {
			font-size: 12px !important;
			margin-bottom: 14px !important;
		}
		.obsead-pais__decade {
			margin-top: 28px !important;
		}

		.obsead-pais__footer {
			padding: 32px 20px 48px !important;
		}
	}

	/* ----------------------------------------------------------------
	 * SMALL PHONES (<= 420px)
	 * ---------------------------------------------------------------- */
	@media (max-width: 420px) {
		.obsead-pais__title.obsead-pais__title {
			font-size: 28px !important;
		}
		.obsead-pais__hero-stats {
			gap: 24px !important;
		}
		.obsead-pais__stat-num {
			font-size: 22px;
		}
		.obsead-pais__section.obsead-pais__section {
			padding: 28px 18px !important;
		}
	}

} /* end @layer obsead */