.dcp-oscar-projects {
	--dcp-dark-green: #004c3f;
	--dcp-orange: #f8690e;
	--dcp-interaction: #f8690e;
	--dcp-blue-gray: #608a98;
	--dcp-light-gray: #dedede;
	--dcp-white: #ffffff;
	--dcp-black: #111111;
	position: relative;
	width: 100%;
	max-width: 604px;
	margin: 0 auto;
	color: var(--dcp-black);
	font-family: "Poppins", "Montserrat", Arial, sans-serif;
	line-height: 1.2;
	container-type: inline-size;
}

.dcp-oscar-projects,
.dcp-oscar-projects * {
	box-sizing: border-box;
}

.dcp-oscar-projects button,
.dcp-oscar-projects a {
	font: inherit;
}

.dcp-carousel-viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--dcp-white);
	transition: height 350ms ease;
}

.dcp-carousel-track {
	display: flex;
	align-items: flex-start;
	width: 100%;
	transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1);
	will-change: transform;
}

.dcp-slide {
	flex: 0 0 100%;
	min-width: 0;
}

.dcp-profile-canvas,
.dcp-projects-canvas {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: var(--dcp-white);
}

.dcp-profile-canvas {
	height: 683px;
}

.dcp-profile-logo,
.dcp-projects-logo {
	position: relative;
	z-index: 4;
	display: flex;
	align-items: center;
	height: 4.1%;
	padding: 0 3.1%;
	background: #d9d9d9;
	color: var(--dcp-dark-green);
	font-size: clamp(11px, 3.2cqw, 20px);
	font-weight: 500;
	letter-spacing: -0.06em;
}

.dcp-profile-logo::first-letter,
.dcp-projects-logo::first-letter {
	letter-spacing: 0;
}

.dcp-profile-hero {
	position: absolute;
	z-index: 0;
	top: 4.1%;
	left: 0;
	width: 100%;
	height: 28.4%;
	background: var(--dcp-dark-green);
}

.dcp-photo-group,
.dcp-profile-name,
.dcp-profile-role,
.dcp-info-panel,
.dcp-competencies-panel,
.dcp-soft-skills-panel {
	position: absolute;
	z-index: 3;
}

.dcp-photo-group {
	left: 9.6%;
	top: 8.1%;
	width: 25.7%;
	height: 21.4%;
}

.dcp-photo-decoration {
	position: absolute;
	z-index: 0;
	background: var(--dcp-orange);
	border-radius: 13px;
}

.dcp-photo-decoration-one {
	top: -8%;
	right: -8%;
	width: 63%;
	height: 64%;
	transform: rotate(-4deg);
}

.dcp-photo-decoration-two {
	left: -6%;
	bottom: -6%;
	width: 64%;
	height: 64%;
}

.dcp-profile-photo {
	position: absolute;
	z-index: 1;
	inset: 0;
	overflow: hidden;
	border-radius: 14px;
	background-color: #eeeeee;
	background-repeat: no-repeat;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.dcp-profile-name {
	left: 40.2%;
	top: 4.8%;
	width: 37.6%;
	margin: 0;
	color: var(--dcp-white);
	font-size: clamp(15px, 3.6cqw, 22px);
	font-weight: 600;
	line-height: 1.28;
}

.dcp-profile-name span,
.dcp-profile-name strong {
	display: block;
}

.dcp-profile-name strong {
	position: relative;
	color: var(--dcp-orange);
	font-weight: 500;
}

.dcp-profile-name strong::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -0.35em;
	width: 100%;
	height: 2px;
	background: var(--dcp-orange);
}

.dcp-profile-role {
	left: 40.2%;
	top: 15.3%;
	width: 27%;
	padding: 0 0 1.2%;
	border-bottom: 2px solid var(--dcp-orange);
	color: var(--dcp-white);
	font-size: clamp(10px, 2.4cqw, 15px);
	font-weight: 500;
}

.dcp-info-panel,
.dcp-competencies-panel,
.dcp-soft-skills-panel {
	overflow: hidden;
	background: var(--dcp-light-gray);
	border-radius: 10px;
}

.dcp-info-panel {
	padding: 2.2% 2.1%;
	font-size: clamp(6px, 1.25cqw, 8px);
}

.dcp-info-panel h3,
.dcp-info-panel h4,
.dcp-competencies-panel h3,
.dcp-soft-skills-panel h3 {
	margin: 0;
	color: var(--dcp-black);
	font-weight: 700;
}

.dcp-info-panel h3 {
	display: flex;
	align-items: center;
	gap: 0.55em;
	font-size: clamp(8px, 1.75cqw, 11px);
}

.dcp-info-panel h3 > span {
	color: var(--dcp-orange);
	font-size: 1.5em;
}

.dcp-info-panel h4 {
	margin-top: 1.1%;
	text-align: center;
	font-size: clamp(7px, 1.45cqw, 9px);
}

.dcp-info-panel p {
	margin: 2.5% 0 0;
}

.dcp-about-panel {
	left: 7%;
	top: 36.6%;
	width: 33.1%;
	height: 30.2%;
}

.dcp-education-panel {
	left: 7%;
	top: 68.6%;
	width: 33.1%;
	height: 27.1%;
}

.dcp-panel-divider {
	width: 100%;
	height: 2px;
	margin: 4% 0 2.5%;
	background: var(--dcp-orange);
}

.dcp-tools-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 6%;
	width: 65%;
	margin: 4% auto 0;
}

.dcp-tool-badge {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border-radius: 7px;
	font-size: clamp(10px, 3cqw, 19px);
	font-weight: 700;
	line-height: 1;
}

.dcp-education-degree {
	font-weight: 600;
}

.dcp-education-period {
	display: block;
	margin-top: 2%;
	color: var(--dcp-orange);
}

.dcp-contact-list {
	display: grid;
	gap: 0.5em;
	margin: 3% 0 0;
	padding: 0;
	list-style: none;
}

.dcp-contact-list li {
	display: flex;
	align-items: center;
	gap: 0.8em;
	min-width: 0;
	word-break: break-word;
}

.dcp-contact-list li > span {
	flex: 0 0 1.15em;
	color: var(--dcp-orange);
	text-align: center;
}

.dcp-pdf-trigger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	width: 100%;
	min-height: 2.5em;
	margin-top: 4%;
	padding: 0.5em 1em;
	border: 0;
	border-radius: 999px;
	background: var(--dcp-orange);
	color: var(--dcp-white);
	font-weight: 700;
	cursor: pointer;
	transition: transform 180ms ease, filter 180ms ease;
}

.dcp-project-button:hover,
.dcp-project-button:focus-visible,
.dcp-project-button:active {
	background-color: var(--dcp-interaction);
	color: var(--dcp-white);
	filter: none;
	transform: translateY(-2px);
}

.dcp-competencies-panel {
	left: 44.2%;
	top: 19.7%;
	width: 49%;
	height: 53%;
	padding: 1.3% 1.8% 1.6%;
}

.dcp-competencies-panel > h3,
.dcp-soft-skills-panel > h3 {
	font-size: clamp(8px, 1.65cqw, 10px);
}

.dcp-competency-list {
	display: grid;
	gap: clamp(3px, 0.65cqw, 5px);
	height: calc(100% - 1.5em);
	margin-top: 1.5%;
	overflow: auto;
	scrollbar-width: thin;
	scrollbar-color: var(--dcp-orange) transparent;
}

.dcp-competency {
	display: grid;
	grid-template-columns: clamp(15px, 3.8cqw, 24px) minmax(0, 1fr);
	gap: 2%;
	align-items: start;
	min-width: 0;
}

.dcp-competency-icon {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	color: color-mix(in srgb, var(--dcp-orange) 42%, white);
	font-size: clamp(9px, 2.4cqw, 15px);
}

.dcp-competency-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dcp-competency-content {
	min-width: 0;
}

.dcp-competency-topline {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.6em;
	font-size: clamp(7px, 1.45cqw, 9px);
}

.dcp-competency-topline strong {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dcp-competency-topline span {
	flex: 0 0 auto;
	font-weight: 700;
}

.dcp-competency p {
	margin: 0.1em 0 0.25em;
	overflow: hidden;
	color: #333333;
	font-size: clamp(6px, 1.08cqw, 7px);
	line-height: 1.14;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dcp-progress-track {
	position: relative;
	width: 100%;
	height: 7px;
	overflow: hidden;
	border-radius: 999px;
	background: #a7a7a7;
}

.dcp-progress-fill {
	position: absolute;
	inset: 0 auto 0 0;
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var(--dcp-orange);
}

.dcp-soft-skills-panel {
	left: 44.2%;
	top: 73.9%;
	width: 49%;
	height: 21.4%;
	padding: 1.5% 1.8%;
}

.dcp-soft-skills-list {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: clamp(3px, 0.7cqw, 5px);
	margin-top: 2.4%;
}

.dcp-soft-skill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 1 1 29%;
	min-height: clamp(18px, 4.8cqw, 29px);
	padding: 0.35em 0.55em;
	border-radius: 6px;
	background: var(--dcp-blue-gray);
	color: var(--dcp-white);
	font-size: clamp(6px, 1.16cqw, 7px);
	line-height: 1.12;
	text-align: center;
	transition: transform 180ms ease;
}

/* Projects slide */
.dcp-projects-canvas {
	min-height: 720px;
	padding-bottom: clamp(18px, 4cqw, 26px);
}

.dcp-projects-logo {
	justify-content: center;
	height: clamp(30px, 8.8cqw, 53px);
}

.dcp-projects-hero {
	display: grid;
	grid-template-columns: 34% 1fr;
	align-items: center;
	min-height: clamp(78px, 20cqw, 122px);
	padding: 3% 6%;
	background: var(--dcp-blue-gray);
	color: var(--dcp-white);
}

.dcp-projects-hero h2 {
	margin: 0;
	font-size: clamp(15px, 4cqw, 24px);
	line-height: 1.35;
}

.dcp-projects-hero h2 span,
.dcp-projects-hero h2 strong {
	display: block;
}

.dcp-projects-heading {
	display: flex;
	align-items: center;
	gap: 2%;
	min-width: 0;
	font-size: clamp(8px, 1.9cqw, 12px);
}

.dcp-projects-heading::before {
	content: "";
	flex: 1 1 auto;
	height: 2px;
	background: var(--dcp-orange);
}

.dcp-projects-heading span {
	flex: 0 0 auto;
	max-width: 50%;
}

.dcp-project-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	padding: clamp(10px, 2.4cqw, 15px);
	background: var(--dcp-white);
}

.dcp-project-card {
	overflow: hidden;
	border-radius: 4px;
	background: var(--dcp-orange);
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
}

.dcp-project-card > header {
	min-height: clamp(40px, 10cqw, 60px);
	padding: 3% 4%;
	background: var(--dcp-blue-gray);
	color: var(--dcp-white);
}

.dcp-project-card h3 {
	margin: 0;
	font-size: clamp(11px, 2.9cqw, 18px);
	font-weight: 600;
}

.dcp-project-card > header > span {
	display: block;
	width: 45%;
	height: clamp(3px, 0.9cqw, 6px);
	margin-top: 4%;
	border-radius: 999px;
	background: #00c577;
}

.dcp-project-cover,
.dcp-album-fallback {
	background-color: var(--dcp-orange);
	background-repeat: no-repeat;
}

.dcp-project-cover {
	width: calc(100% - 8%);
	height: 145px;
	margin: 4% auto;
	border-radius: 5px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);
}

.dcp-project-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: clamp(29px, 7cqw, 42px);
	padding: 0.5em 1em;
	border: 0;
	background: var(--dcp-dark-green);
	color: var(--dcp-white);
	font-size: clamp(10px, 2.25cqw, 14px);
	font-weight: 600;
	cursor: pointer;
	transition: transform 180ms ease, filter 180ms ease;
}

/* Navigation */
.dcp-carousel-arrow {
	position: absolute;
	z-index: 35;
	top: 50%;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 2px solid var(--dcp-orange);
	border-radius: 50%;
	appearance: none;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--dcp-orange);
	box-shadow: none !important;
	font-size: 20px;
	cursor: pointer;
	transform: translateY(-50%);
	transition: transform 180ms ease;
}

.dcp-carousel-arrow:hover,
.dcp-carousel-arrow:focus,
.dcp-carousel-arrow:focus-visible,
.dcp-carousel-arrow:active {
	border-color: var(--dcp-orange) !important;
	background-color: transparent !important;
	background-image: none !important;
	color: var(--dcp-orange) !important;
	box-shadow: none !important;
	transform: translateY(-50%) scale(1.06);
}

.dcp-carousel-arrow svg,
.dcp-floating-icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}

.dcp-carousel-prev {
	left: -58px;
}

.dcp-carousel-next {
	right: -58px;
}

.dcp-carousel-dots {
	display: flex;
	justify-content: center;
	gap: 13px;
	padding: 14px 0 2px;
}

.dcp-carousel-dot {
	width: 12px;
	height: 12px;
	padding: 0;
	border: 2px solid var(--dcp-orange);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: transform 180ms ease, background-color 180ms ease;
}

.dcp-carousel-dot.is-active {
	border-color: var(--dcp-interaction);
	background: var(--dcp-interaction);
	transform: scale(1.08);
}

.dcp-carousel-dot:not(.is-active):hover,
.dcp-carousel-dot:not(.is-active):focus,
.dcp-carousel-dot:not(.is-active):focus-visible,
.dcp-carousel-dot:not(.is-active):active {
	background-color: transparent !important;
	background-image: none !important;
}

/* Floating contact follows scrolling while remaining inside the widget. */
.dcp-floating-contact {
	position: absolute;
	z-index: 45;
	top: 0;
	right: 3%;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: clamp(42px, 8cqw, 50px);
	max-width: clamp(42px, 8cqw, 50px);
	height: clamp(42px, 8cqw, 50px);
	overflow: hidden;
	padding: 0;
	border: 2px solid var(--dcp-white);
	border-radius: 999px;
	background: var(--dcp-orange);
	color: var(--dcp-white);
	text-decoration: none;
	box-shadow: 0 5px 16px rgba(0, 0, 0, 0.22);
	transform: translateY(var(--dcp-floating-y, 58px));
	transition: max-width 260ms ease, width 260ms ease, filter 180ms ease;
	will-change: transform;
}

.dcp-floating-contact:hover,
.dcp-floating-contact:focus-visible,
.dcp-floating-contact:active {
	width: clamp(150px, 35cqw, 215px);
	max-width: clamp(150px, 35cqw, 215px);
	background: var(--dcp-interaction);
	color: var(--dcp-white);
	filter: none;
}

.dcp-floating-icon {
	display: grid;
	place-items: center;
	flex: 0 0 clamp(38px, 7.4cqw, 46px);
	font-size: clamp(18px, 4.4cqw, 27px);
}

.dcp-floating-label {
	display: block;
	flex: 0 0 auto;
	padding-right: 1.2em;
	opacity: 0;
	font-size: clamp(10px, 2.1cqw, 13px);
	font-weight: 600;
	white-space: nowrap;
	transition: opacity 140ms ease 60ms;
}

.dcp-floating-contact:hover .dcp-floating-label,
.dcp-floating-contact:focus-visible .dcp-floating-label {
	opacity: 1;
}

/* Modals */
.dcp-modal {
	position: fixed;
	z-index: 999999;
	inset: 0;
	display: grid;
	place-items: center;
	padding: 24px;
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	transition: opacity 180ms ease, visibility 180ms ease;
}

.dcp-modal.is-open {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
}

.dcp-modal-backdrop {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	appearance: none;
	background-color: #f8690e !important;
	background-image: none !important;
	cursor: pointer;
}

.dcp-modal-backdrop:hover,
.dcp-modal-backdrop:focus,
.dcp-modal-backdrop:focus-visible,
.dcp-modal-backdrop:active {
	background-color: #f8690e !important;
	background-image: none !important;
	box-shadow: none !important;
}

.dcp-modal-dialog {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(940px, 94vw);
	max-height: 92vh;
	overflow: hidden;
	border: 3px solid var(--dcp-orange);
	border-radius: 18px;
	background: var(--dcp-white);
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
}

.dcp-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	min-height: 58px;
	padding: 12px 18px 12px 24px;
	background: var(--dcp-orange);
	color: var(--dcp-white);
}

.dcp-modal-header h3 {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
}

.dcp-modal-close {
	display: grid;
	place-items: center;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 2px solid currentColor;
	border-radius: 50%;
	background: transparent;
	color: inherit;
	font-size: 27px;
	line-height: 1;
	cursor: pointer;
}

.dcp-modal-close:hover,
.dcp-modal-close:focus-visible,
.dcp-modal-close:active {
	border-color: var(--dcp-interaction);
	background: var(--dcp-interaction);
	color: var(--dcp-white);
}

.dcp-pdf-frame {
	display: none;
	width: 100%;
	height: min(72vh, 760px);
	border: 0;
	background: #ececec;
}

.dcp-pdf-empty {
	display: grid;
	place-items: center;
	min-height: 260px;
	padding: 36px;
	color: #333333;
	font-size: 16px;
	line-height: 1.5;
	text-align: center;
}

.dcp-pdf-actions {
	display: none;
	justify-content: flex-end;
	gap: 12px;
	padding: 12px 18px;
	background: #efefef;
}

.dcp-pdf-actions a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 38px;
	padding: 8px 18px;
	border-radius: 999px;
	background: var(--dcp-dark-green);
	color: var(--dcp-white);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.dcp-pdf-modal.has-pdf .dcp-pdf-frame,
.dcp-pdf-modal.has-pdf .dcp-pdf-actions {
	display: flex;
}

.dcp-pdf-modal.has-pdf .dcp-pdf-frame {
	display: block;
}

.dcp-pdf-modal.has-pdf .dcp-pdf-empty {
	display: none;
}

.dcp-album-modal .dcp-modal-dialog {
	width: min(980px, 94vw);
}

.dcp-album-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	padding: 20px;
	overflow: auto;
}

.dcp-album-item {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin: 0;
	border-radius: 12px;
	background: #ececec;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14);
}

.dcp-album-item:focus-visible {
	outline: 4px solid var(--dcp-interaction);
	outline-offset: 2px;
}

.dcp-album-item img,
.dcp-album-fallback {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.dcp-album-item figcaption {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	gap: 0.45em;
	padding: 24px 12px 12px;
	background: linear-gradient(transparent, var(--dcp-interaction));
	color: var(--dcp-white);
	font-size: 14px;
	opacity: 0;
	transform: translateY(12px);
	transition: opacity 180ms ease, transform 180ms ease;
}

.dcp-album-item:hover figcaption,
.dcp-album-item:focus-visible figcaption,
.dcp-album-item.is-caption-visible figcaption {
	opacity: 1;
	transform: translateY(0);
}

body.dcp-modal-open {
	overflow: hidden;
}

@media (max-width: 740px) {
	.dcp-carousel-prev {
		left: 8px;
	}

	.dcp-carousel-next {
		right: 8px;
	}

	.dcp-carousel-arrow {
		width: 36px;
		height: 36px;
		background-color: transparent !important;
		background-image: none !important;
		font-size: 16px;
	}
}

@media (max-width: 520px) {
	.dcp-profile-canvas {
		height: 640px;
	}

	.dcp-info-panel {
		padding: 2%;
	}

	.dcp-competencies-panel {
		padding: 1.6%;
	}

	.dcp-project-grid {
		gap: 8px;
		padding: 8px;
	}

	.dcp-project-cover {
		height: 105px;
	}

	.dcp-album-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px;
		padding: 12px;
	}

	.dcp-modal {
		padding: 10px;
	}

	.dcp-modal-header {
		min-height: 50px;
		padding: 8px 10px 8px 14px;
	}

	.dcp-modal-header h3 {
		font-size: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dcp-oscar-projects *,
	.dcp-oscar-projects *::before,
	.dcp-oscar-projects *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}

/* La ficha conserva escritorio y se convierte en una cuadrícula vertical en móvil. */
@media (max-width: 520px) {
	.dcp-profile-canvas {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"logo"
			"photo"
			"name"
			"role"
			"about"
			"education"
			"competencies"
			"skills";
		gap: 14px;
		height: auto !important;
		min-height: 0;
		padding: 0 14px 18px;
		background: linear-gradient(var(--dcp-dark-green) 0 320px, var(--dcp-white) 320px);
	}

	.dcp-profile-logo {
		grid-area: logo;
		height: auto;
		min-height: 34px;
		margin-inline: -14px;
	}

	.dcp-profile-hero {
		top: 34px;
		height: 286px;
	}

	.dcp-photo-group,
	.dcp-profile-name,
	.dcp-profile-role,
	.dcp-info-panel,
	.dcp-competencies-panel,
	.dcp-soft-skills-panel {
		position: relative !important;
		top: auto !important;
		left: auto !important;
		width: 100% !important;
		height: auto !important;
		min-width: 0;
	}

	.dcp-photo-group {
		grid-area: photo;
		width: 150px !important;
		height: 150px !important;
		margin: 16px auto 0;
	}

	.dcp-profile-name {
		grid-area: name;
		margin: 0;
		font-size: clamp(22px, 7vw, 30px);
		text-align: center;
	}

	.dcp-profile-role {
		grid-area: role;
		margin: 0 auto 16px;
		padding-bottom: 8px;
		font-size: 14px;
		text-align: center;
	}

	.dcp-about-panel {
		grid-area: about;
	}

	.dcp-education-panel {
		grid-area: education;
	}

	.dcp-competencies-panel {
		grid-area: competencies;
	}

	.dcp-soft-skills-panel {
		grid-area: skills;
	}

	.dcp-info-panel,
	.dcp-competencies-panel,
	.dcp-soft-skills-panel {
		padding: 16px;
		font-size: 12px;
	}

	.dcp-info-panel h3,
	.dcp-info-panel h4,
	.dcp-competencies-panel > h3,
	.dcp-soft-skills-panel > h3 {
		font-size: 14px;
	}

	.dcp-competency-list {
		height: auto;
		overflow: visible;
	}

	.dcp-competency {
		grid-template-columns: 26px minmax(0, 1fr);
	}

	.dcp-competency-topline,
	.dcp-competency p,
	.dcp-soft-skill {
		font-size: 11px;
	}

	.dcp-competency p,
	.dcp-competency-topline strong {
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.dcp-projects-canvas {
		min-height: 0;
	}

	.dcp-projects-hero,
	.dcp-project-grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.dcp-projects-hero {
		gap: 12px;
		padding: 18px;
		text-align: center;
	}

	.dcp-projects-heading {
		justify-content: center;
	}

	.dcp-projects-heading span {
		max-width: 75%;
	}

	.dcp-project-cover {
		height: auto;
		aspect-ratio: 16 / 9;
	}

	.dcp-floating-contact {
		right: 12px;
	}
}

@media (max-width: 400px) {
	.dcp-album-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}