/*
 * Estilos complementarios a theme.json.
 * Solo lo que no se puede expresar con ajustes de bloques (sticky, sombras, hover, decoraciones).
 */

/* Sin huecos blancos entre encabezado, contenido y pie */
.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* Encabezado fijo */
header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

body.admin-bar header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.dw-header {
	background: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

.dw-header .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--blue);
}

.dw-header .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--line) !important;
	border-radius: var(--wp--custom--radius);
	box-shadow: var(--wp--custom--shadow);
	padding: 0.5rem 0;
}

/* Hero */
.dw-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.dw-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image: radial-gradient(rgba(63, 182, 224, 0.18) 1px, transparent 1px);
	background-size: 28px 28px;
	mask-image: linear-gradient(90deg, transparent 0%, #000 60%);
}

.dw-hero mark {
	background: none;
	color: var(--wp--preset--color--cyan);
}

/* Etiqueta tipo "badge" */
.dw-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	width: fit-content;
	padding: 0.35rem 0.9rem;
	border: 1px solid rgba(63, 182, 224, 0.45);
	border-radius: 999px;
	background: rgba(63, 182, 224, 0.1);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dw-badge::before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan);
}

/* Etiqueta pequeña sobre los títulos de sección */
.dw-eyebrow {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
}

/* Tarjetas */
.dw-card {
	height: 100%;
	padding: var(--wp--preset--spacing--60);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: var(--wp--custom--radius);
	background: var(--wp--preset--color--white);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.dw-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--wp--custom--shadow);
}

.dw-card .dw-card__tag {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--blue);
}

.dw-card--compact {
	padding: var(--wp--preset--spacing--50);
	gap: 0.5rem;
}

/* Pasos del proceso */
.dw-step__number {
	display: inline-grid;
	place-items: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	font-weight: 800;
}

.dw-steps > .wp-block-column {
	border-top: 2px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--50);
}

/* Íconos */
.dw-icon img {
	width: 52px;
	height: 52px;
}

/* Lista con palomitas */
.dw-checklist {
	list-style: none;
	padding-left: 0;
}

.dw-checklist li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.6rem;
}

.dw-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 1.1rem;
	height: 1.1rem;
	border-radius: 50%;
	background: var(--wp--preset--color--cyan) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 70% no-repeat;
}

/* Botón contorno sobre fondos oscuros */
.dw-on-dark .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--white);
	border-color: rgba(255, 255, 255, 0.6);
}

.dw-on-dark .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.1);
}

/* Pie de página */
.dw-footer a {
	color: inherit;
	text-decoration: none;
}

.dw-footer a:hover {
	color: var(--wp--preset--color--cyan);
}

.dw-footer__links {
	list-style: none;
}

.dw-footer__bottom {
	margin-top: var(--wp--preset--spacing--60);
	padding-top: var(--wp--preset--spacing--40);
	border-top: 1px solid rgba(199, 212, 234, 0.25);
}

@media (prefers-reduced-motion: reduce) {
	.dw-card {
		transition: none;
	}

	.dw-card:hover {
		transform: none;
	}
}