/*
 * Diez Canseco (starter) — detalles del diseño que theme.json no cubre.
 * Los tokens viven en theme.json; aquí solo se consumen sus variables
 * (--wp--preset--*, --wp--custom--*). Clases utilitarias con prefijo .dc-
 * usadas por los patterns del tema. Los valores hardcodeados de este archivo
 * son placeholder: se reemplazan al aplicar el diseño real de cada proyecto
 * (pipeline de la skill design-tokens).
 */

::selection {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

html {
	scroll-behavior: smooth;
}

/* ---------- Eyebrow (kicker con guion) ---------- */
.dc-eyebrow {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 700;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.dc-eyebrow::before {
	content: "";
	width: 24px;
	height: 1px;
	background: currentColor;
}

/* ---------- Etiquetas mono (stats, timeline, cards) ---------- */
.dc-mono-label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-hint);
}
.dc-mono {
	font-family: var(--wp--preset--font-family--mono);
}

/* ---------- Hero ---------- */
.dc-hero {
	position: relative;
	overflow: hidden;
}
.dc-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(255, 255, 255, 0.025) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
	background-size: 64px 64px;
	-webkit-mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 70%);
	mask-image: radial-gradient(circle at 70% 30%, black 0%, transparent 70%);
	pointer-events: none;
}
.dc-hero::after {
	content: "";
	position: absolute;
	top: -200px;
	right: -200px;
	width: 700px;
	height: 700px;
	background: radial-gradient(circle, rgba(242, 178, 33, 0.16) 0%, transparent 65%);
	pointer-events: none;
}
.dc-hero > * {
	position: relative;
	z-index: 1;
}
/* .dc-accent es la clase canónica; .dc-yellow se mantiene como alias
   legacy para contenido ya guardado que la use. */
.dc-accent,
.dc-yellow {
	color: var(--wp--preset--color--accent);
	font-style: normal;
}
.dc-bracket {
	font-family: var(--wp--preset--font-family--mono);
	color: var(--wp--preset--color--primary);
	font-weight: 400;
	font-size: 0.78em;
	letter-spacing: -0.05em;
}

/* Chip "disponible" con dot pulsante */
.dc-hero-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 7px 14px 7px 12px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--surface);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-muted);
}
.dc-hero-tag::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	box-shadow: 0 0 12px var(--wp--preset--color--primary);
	animation: dc-pulse 2s var(--wp--custom--ease) infinite;
}
@keyframes dc-pulse {
	50% { opacity: 0.45; }
}

/* ---------- Code card decorativa del hero ---------- */
.dc-code-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	overflow: hidden;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13.5px;
	line-height: 1.7;
	box-shadow: var(--wp--custom--shadow--card);
}
.dc-code-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface-elevated);
	color: var(--wp--preset--color--text-hint);
	font-size: var(--wp--preset--font-size--x-small);
}
.dc-code-bar .dots {
	display: flex;
	gap: 6px;
}
.dc-code-bar .dots span {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--wp--preset--color--border-strong);
}
.dc-code-body {
	padding: 24px 28px;
	color: var(--wp--preset--color--text-body);
	white-space: pre;
	overflow-x: auto;
}
.dc-code-body .gutter { color: #4A4A4A; display: inline-block; width: 24px; user-select: none; }
.dc-code-body .tk-prop { color: var(--wp--preset--color--primary); }
.dc-code-body .tk-str { color: #B4E89C; }
.dc-code-body .tk-keyword { color: #E8916B; }
.dc-code-body .tk-const { color: #87C4FF; }
.dc-code-body .tk-punct { color: var(--wp--preset--color--text-hint); }
.dc-code-body .tk-comment { color: #4A4A4A; font-style: italic; }
.dc-code-cursor {
	display: inline-block;
	width: 7px;
	height: 1.05em;
	background: var(--wp--preset--color--primary);
	vertical-align: -2px;
	margin-left: 2px;
	animation: dc-blink 1.1s steps(1) infinite;
}
@keyframes dc-blink {
	50% { opacity: 0; }
}

/* ---------- Botones ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: all 0.2s var(--wp--custom--ease);
}
.wp-element-button:hover,
.wp-block-button__link:hover {
	transform: translateY(-1px);
	box-shadow: var(--wp--custom--shadow--glow);
}
.is-style-outline .wp-block-button__link {
	border: 1px solid var(--wp--preset--color--border-strong);
	background: transparent;
	color: var(--wp--preset--color--contrast);
}
.is-style-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
	box-shadow: none;
}

/* ---------- Tarjetas genéricas ---------- */
.dc-card {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--md);
	transition: border-color 0.25s var(--wp--custom--ease), transform 0.25s var(--wp--custom--ease);
}
.dc-card-hover:hover {
	border-color: var(--wp--preset--color--border-strong);
	transform: translateY(-2px);
}

/* ---------- Tags / chips ---------- */
.dc-tag {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	padding: 6px 10px;
	background: var(--wp--preset--color--surface-elevated);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	color: var(--wp--preset--color--text-body);
	margin: 0 !important;
}
.dc-tag.is-accent {
	color: var(--wp--preset--color--accent);
	border-color: rgba(242, 178, 33, 0.4);
}
.dc-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px !important;
}

/* ---------- Listas con flecha amarilla (timeline, features) ---------- */
.dc-arrow-list {
	list-style: none;
	padding-left: 0;
	color: var(--wp--preset--color--text-muted);
	font-size: 15.5px;
	line-height: 1.55;
	max-width: 720px;
}
.dc-arrow-list li {
	padding-left: 22px;
	position: relative;
	margin-bottom: 8px;
}
.dc-arrow-list li::before {
	content: "→";
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono);
}

/* ---------- Timeline ---------- */
.dc-tl-row {
	border-top: 1px solid var(--wp--preset--color--border);
	padding-top: 32px !important;
	padding-bottom: 32px !important;
}
.dc-tl-row:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.dc-tl-year {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}
.dc-tl-year::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--border-strong);
	margin-right: 14px;
	transition: background 0.2s var(--wp--custom--ease);
}
.dc-tl-row:hover .dc-tl-year::before {
	background: var(--wp--preset--color--primary);
}
.dc-tl-row:hover h3 {
	color: var(--wp--preset--color--primary);
}
.dc-tl-row h3 {
	transition: color 0.25s var(--wp--custom--ease);
}
.dc-tl-company {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--text-muted);
}

/* ---------- Grid de servicios con bordes compartidos ---------- */
.dc-services {
	border-top: 1px solid var(--wp--preset--color--border);
	border-left: 1px solid var(--wp--preset--color--border);
}
.dc-service {
	border-right: 1px solid var(--wp--preset--color--border);
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding: 36px !important;
	transition: background 0.25s var(--wp--custom--ease);
	min-height: 280px;
}
.dc-service:hover {
	background: var(--wp--preset--color--surface);
}
.dc-service:hover .dc-service-num {
	color: var(--wp--preset--color--primary);
}
.dc-service-num {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 13px;
	color: var(--wp--preset--color--text-hint);
	letter-spacing: 0.1em;
	transition: color 0.25s var(--wp--custom--ease);
}

/* ---------- Certificaciones ---------- */
.dc-cert {
	border-bottom: 1px solid var(--wp--preset--color--border);
	border-right: 1px solid var(--wp--preset--color--border);
	padding: 22px 24px !important;
	transition: background 0.2s var(--wp--custom--ease);
}
.dc-cert:hover {
	background: var(--wp--preset--color--surface);
}
.dc-certs {
	border-top: 1px solid var(--wp--preset--color--border);
}

/* ---------- Covers tipográficos de proyectos ---------- */
.dc-cover {
	min-height: 220px;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
/* Variantes genéricas de cover (-a/-b/-c). Los sufijos -jv/-bc/-hd son
   aliases legacy de un proyecto anterior; usar -a/-b/-c en patterns nuevos. */
.dc-cover-a,
.dc-cover-jv {
	background:
		radial-gradient(ellipse at 30% 50%, rgba(59, 130, 246, 0.16) 0%, transparent 60%),
		linear-gradient(135deg, #1C2230 0%, #0E1118 100%);
}
.dc-cover-b,
.dc-cover-bc {
	background:
		radial-gradient(ellipse at 70% 30%, rgba(59, 130, 246, 0.10) 0%, transparent 60%),
		linear-gradient(135deg, #1A1E28 0%, #0C0E13 100%);
}
.dc-cover-c,
.dc-cover-hd {
	background:
		radial-gradient(ellipse at 50% 80%, rgba(59, 130, 246, 0.12) 0%, transparent 65%),
		linear-gradient(135deg, #171B24 0%, #0D0F14 100%);
}

/* ---------- Header / nav ---------- */
.dc-nav {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 255, 255, 0.82) !important;
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.dc-nav .wp-block-navigation a {
	font-size: 14px;
	color: var(--wp--preset--color--text-muted);
	transition: color 0.2s var(--wp--custom--ease);
}
.dc-nav .wp-block-navigation a:hover {
	color: var(--wp--preset--color--contrast);
}
.dc-nav .wp-block-site-title a {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

/* ---------- Footer ---------- */
.dc-footer {
	border-top: 1px solid var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--text-hint);
}
.dc-footer a {
	color: var(--wp--preset--color--text-muted);
	padding: 6px 10px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--pill);
	text-decoration: none;
	transition: all 0.2s var(--wp--custom--ease);
}
.dc-footer a:hover {
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary);
}

/* ---------- Contacto ---------- */
.dc-contact-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 0 !important;
	border-top: 1px solid var(--wp--preset--color--border);
	transition: padding-left 0.25s var(--wp--custom--ease);
	text-decoration: none;
}
.dc-contact-item:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.dc-contact-item:hover {
	padding-left: 12px !important;
}
.dc-contact-item .k {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-hint);
}
.dc-contact-item .v {
	color: var(--wp--preset--color--contrast);
}
.dc-contact-item:hover .v {
	color: var(--wp--preset--color--primary);
}

/* ---------- Motion: reveal on scroll (mejora progresiva) ---------- */
/* El estado oculto SOLO aplica cuando assets/js/theme.js marcó html.dc-motion.
   Sin JS, en el editor de bloques o con prefers-reduced-motion todo queda visible.
   Clases administrables: .dc-reveal (bloque) y .dc-stagger (contenedor). */
html.dc-motion .dc-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 0.7s var(--wp--custom--ease),
		transform 0.7s var(--wp--custom--ease);
	will-change: opacity, transform;
}
html.dc-motion .dc-reveal.is-revealed {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	html.dc-motion .dc-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- Responsive helpers ---------- */
@media (max-width: 781px) {
	.dc-code-card {
		font-size: 12px;
	}
	.dc-service {
		min-height: 0;
	}
}

/* ========================================================================
   Capa dinámica (F4.2): áreas, expertos, perfiles y equipo
   ======================================================================== */

/* Los bloques de servicio y el aside de expertos del single de área viven en
   "Single de área", más abajo (fiel a servicios.$area.tsx). Aquí no se repiten. */

/* ---------- Miembro: hero head ---------- */
.dc-member-role { font-size: 1.15rem; color: var(--wp--preset--color--primary-hover); margin: 6px 0 0; }
.dc-member-spec { color: var(--wp--preset--color--text-muted); margin: 4px 0 0; }
.dc-member-contact { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; font-size: .95rem; }
.dc-member-contact a { color: var(--wp--preset--color--primary); text-decoration: none; }
.dc-member-contact a:hover { color: var(--wp--preset--color--accent-hover); }
.dc-member-contact .dc-sep { color: var(--wp--preset--color--border-strong); }

/* ---------- Miembro: cuerpo ---------- */
.dc-member-body { display: flex; flex-direction: column; gap: 36px; max-width: 820px; }
.dc-member-vision { border-left: 4px solid var(--wp--preset--color--accent); padding-left: 18px; }
.dc-member-vision h3 { font-family: var(--wp--preset--font-family--heading); color: var(--wp--preset--color--contrast); margin: 0 0 8px; }
.dc-member-vision p { color: var(--wp--preset--color--text-muted); margin: 0; }
.dc-member-section-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--wp--preset--color--border); }
.dc-member-intro { color: var(--wp--preset--color--text-body); }
.dc-bullet-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-bullet-list li { padding-left: 22px; position: relative; color: var(--wp--preset--color--text-body); }
.dc-bullet-list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 3px; border-radius: 2px; background: var(--wp--preset--color--accent); }

/* ---------- Equipo: grid agrupado ---------- */
.dc-team-group { margin-bottom: 56px; }
.dc-team-group-title { font-family: var(--wp--preset--font-family--heading); font-size: var(--wp--preset--font-size--large); color: var(--wp--preset--color--contrast); border-bottom: 2px solid var(--wp--preset--color--accent); display: inline-block; padding-bottom: 6px; margin: 0 0 28px; }
.dc-team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px; }
.dc-person-card { display: block; text-decoration: none; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: 10px; overflow: hidden; transition: transform .3s var(--wp--custom--ease), border-color .3s var(--wp--custom--ease), box-shadow .3s var(--wp--custom--ease); }
.dc-person-card:hover { transform: translateY(-4px); border-color: var(--wp--preset--color--accent); box-shadow: var(--wp--custom--shadow--card); }
.dc-person-card-photo img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.dc-person-card-name { display: block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--contrast); padding: 14px 16px 0; }
.dc-person-card-role { display: block; font-size: .85rem; color: var(--wp--preset--color--text-muted); padding: 2px 16px 16px; }

/* ========================================================================
   Header y Footer reales (F4.3a) — navy Diez Canseco
   ======================================================================== */
.dc-header { position: sticky; top: 0; z-index: 100; background: var(--wp--preset--color--primary); color: #fff; }
.dc-utility { border-bottom: 1px solid rgba(255,255,255,0.12); padding-top: 12px; padding-bottom: 12px; }
.dc-logo a { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: 20px; color: #fff; text-decoration: none; letter-spacing: -0.01em; }
.dc-utility-contact { margin: 0; font-size: 13px; color: rgba(255,255,255,0.7); }
.dc-lang { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .08em; color: rgba(255,255,255,0.85); border: 1px solid rgba(255,255,255,0.25); border-radius: 6px; padding: 6px 10px; }
.dc-search { display: flex; align-items: center; background: rgba(255,255,255,0.95); border-radius: 999px; overflow: hidden; padding: 0 6px 0 14px; }
.dc-search .dc-search-input { background: transparent; border: none; outline: none; color: var(--wp--preset--color--contrast); font-size: 13px; padding: 8px 6px; min-width: 180px; }
.dc-search .dc-search-input::placeholder { color: color-mix(in oklab, var(--wp--preset--color--primary) 45%, transparent); }
.dc-search .dc-search-btn { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--wp--preset--color--primary); padding: 6px 8px; }
.dc-newsletter-cta .wp-block-button__link { font-size: 12px; padding: 9px 16px; }

.dc-mainnav { padding-top: 12px; padding-bottom: 12px; }
.dc-mainnav .wp-block-navigation { font-family: var(--wp--preset--font-family--heading); font-size: 14px; font-weight: 600; }
.dc-mainnav .wp-block-navigation a,
.dc-mainnav .wp-block-navigation .wp-block-navigation-item__content { color: rgba(255,255,255,0.85); text-decoration: none; }
.dc-mainnav .wp-block-navigation-item__content { position: relative; padding-bottom: 4px; }
.dc-mainnav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--wp--custom--ease); }
.dc-mainnav .wp-block-navigation-item:hover .wp-block-navigation-item__content::after { transform: scaleX(1); }
.dc-mainnav .wp-block-navigation-item:hover .wp-block-navigation-item__content { color: #fff; }

.dc-site-footer { background: var(--wp--preset--color--primary); color: rgba(255,255,255,0.85); }
/* Footer: grid de 5 columnas (fiel a Lovable) — evita el flex roto de wp:columns con flex-basis inválido */
.dc-footer-cols { display: grid !important; grid-template-columns: 1fr 1fr 1fr 1.3fr auto; gap: clamp(28px, 3vw, 48px); align-items: start; }
.dc-footer-cols > .wp-block-column { flex: none !important; margin: 0 !important; }
.dc-footer-logo, .dc-footer-logo a { font-size: 1.2rem; font-weight: 800; white-space: nowrap; color: #fff; }
.dc-footer-contact { margin: 18px 0 0; font-size: 0.9rem; color: rgba(255,255,255,0.8); line-height: 1.7; }
.dc-footer-social { margin-top: 16px; display: flex; gap: 14px; }
.dc-footer-social a { display: inline-flex; opacity: 0.85; transition: opacity 0.2s var(--wp--custom--ease, ease); }
.dc-footer-social a:hover { opacity: 1; }
.dc-footer-social svg { width: 20px; height: 20px; }
.dc-footer-call .wp-block-button { display: flex; justify-content: flex-end; }
/* El botón dorado "Llamar" se retiró a petición del cliente: ahora el número se
   lee directamente. Sigue siendo un enlace `tel:`. `overflow-wrap: anywhere`
   porque un teléfono no tiene espacios donde partir y la columna es estrecha
   (misma razón que los correos en F4.23). */
.dc-footer-tel { display: inline-flex; align-items: center; gap: 8px; font-size: 0.95rem; font-weight: 600; color: #fff; text-decoration: none; overflow-wrap: anywhere; }
.dc-footer-tel svg { flex: none; color: var(--wp--preset--color--accent); }
.dc-footer-tel:hover { color: var(--wp--preset--color--accent); }
.dc-footer-address { margin: 16px 0 0 auto; max-width: 220px; font-size: 0.9rem; color: rgba(255,255,255,0.7); }
@media (max-width: 900px) { .dc-footer-cols { grid-template-columns: 1fr 1fr; } .dc-footer-address { margin-left: 0; } }
@media (max-width: 560px) { .dc-footer-cols { grid-template-columns: 1fr; } }
.dc-footer-title { font-family: var(--wp--preset--font-family--heading); font-size: 12px; text-transform: uppercase; letter-spacing: .14em; color: rgba(255,255,255,0.55); margin: 0 0 16px; }
.dc-footer-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dc-footer-list a { color: rgba(255,255,255,0.8); text-decoration: none; font-size: 14px; }
.dc-footer-list a:hover { color: #fff; }
.dc-footer-contact { font-size: 14px; color: rgba(255,255,255,0.8); line-height: 1.6; margin: 0 0 16px; }
.dc-footer-social a { color: #fff; }
.dc-footer-tag { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: #fff; margin-top: 16px; max-width: 220px; }
.dc-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 18px; padding-bottom: 18px; }
.dc-footer-copy, .dc-footer-legal { margin: 0; font-size: 12px; color: rgba(255,255,255,0.6); }
.dc-footer-legal a { color: rgba(255,255,255,0.7); text-decoration: none; }
.dc-footer-legal a:hover { color: #fff; }

/* ========================================================================
   Portada / Home (F4.3b)
   ======================================================================== */
.dc-hsec { padding: clamp(56px, 8vw, 96px) 0; }
.dc-wrap { max-width: 1240px; margin: 0 auto; padding-left: var(--wp--custom--gutter); padding-right: var(--wp--custom--gutter); }
.dc-hsec-title { display: flex; align-items: center; gap: 16px; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.875rem, 2.6vw, 2.25rem); color: var(--wp--preset--color--contrast); margin: 0 0 clamp(40px, 5vw, 56px); letter-spacing: -0.01em; }
.dc-hsec-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(to right, currentColor, transparent); opacity: 0.22; }

/* Sin block-gap entre header/main/footer: header pegado al hero, footer pegado al contenido (fiel a Lovable) */
.wp-site-blocks > main,
.wp-site-blocks > footer { margin-block-start: 0; }
/* Secciones de la portada pegadas entre sí (sin bandas blancas del block-gap del post-content) */
.wp-block-post-content > * { margin-block-start: 0; margin-block-end: 0; }

/* ------------------------------------------------------------------ Hero
   Traducción de `function Hero()` de src/routes/index.tsx del zip. El fondo es
   un vídeo servido por el bloque Cover, así que el cliente lo reemplaza desde
   el editor como cualquier medio. Lo que el bloque no sabe expresar —la viñeta
   radial, el texto arriba en vez de centrado y la entrada escalonada— va aquí. */
/* `justify-start` + `pt-16 pb-24 md:pt-20 md:pb-32`: el contenido NO está
   centrado en vertical, arranca arriba. Es lo que deja el aire bajo los botones. */
.dc-hero-cover { align-items: flex-start; }
.dc-hero-cover .wp-block-cover__inner-container { max-width: 896px; padding: 64px 24px 96px; box-sizing: border-box; } /* max-w-4xl px-6 pt-16 pb-24 */
@media (min-width: 768px) { .dc-hero-cover .wp-block-cover__inner-container { padding: 80px 24px 128px; } } /* md:pt-20 md:pb-32 */

/* Tope defensivo: el reel mide 1920×1080 y el núcleo le deja `max-width: none`.
   Aquí no arregla ningún fallo conocido —el desborde de 81px que hubo en F4.30
   venía de otra cosa—, pero evita que el ancho intrínseco del vídeo pueda
   escaparse si algún día cambia el CSS del bloque.
   El selector lleva el elemento Y la clase del núcleo a propósito:
   `.dc-hero-cover video` (0,1,1) PIERDE contra
   `.wp-block-cover .wp-block-cover__video-background` (0,2,0). */
.dc-hero-cover video.wp-block-cover__video-background { max-width: 100%; max-height: 100%; }

/* Segundo velo: viñeta radial que oscurece las esquinas. El bloque Cover solo
   admite un color plano, así que el degradado va en un ::after propio. El
   primer velo (brand al 30 %) sí lo pone el bloque. */
.dc-hero-cover::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: radial-gradient(ellipse at center, transparent 0%, rgba(0,7,22,0.25) 70%, rgba(0,7,22,0.55) 100%);
}
.dc-hero-cover .wp-block-cover__inner-container { position: relative; z-index: 2; }

/* Logo: h-32 / md:h-44 / lg:h-52 y `mb-6`. Manda el ALTO, el ancho es
   proporcional — por eso `width:auto` y `height` fijo, no al revés. */
.dc-hero-logo-img { margin: 0 0 24px; }
.dc-hero-logo-img img {
	height: 128px; width: auto; max-width: 100%; display: block; margin: 0 auto;
	filter: drop-shadow(0 2px 18px rgba(0,0,0,0.55));
}
@media (min-width: 768px) { .dc-hero-logo-img img { height: 176px; } }
@media (min-width: 1024px) { .dc-hero-logo-img img { height: 208px; } }

.dc-hero-cover .dc-hero-title { font-size: clamp(1.125rem, 2.2vw, 1.5rem); font-weight: 700; line-height: 1.15; margin: 0; letter-spacing: -0.01em; filter: drop-shadow(0 2px 16px rgba(0,0,0,0.55)); } /* text-lg md:text-2xl */
.dc-hero-cover .dc-hero-sub { max-width: 512px; margin: 16px auto 0; font-size: 0.875rem; line-height: 1.5; color: rgba(255,255,255,0.85); filter: drop-shadow(0 1px 10px rgba(0,0,0,0.5)); } /* max-w-lg mt-4 text-sm md:text-base text-white/85 */
@media (min-width: 768px) { .dc-hero-cover .dc-hero-sub { font-size: 1rem; } }
.dc-hero-cover .wp-block-buttons { margin-top: 24px; gap: 12px; } /* mt-6 gap-3 */
.dc-hero-cover .dc-btn-ghost .wp-block-button__link { background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.5); color: #fff; backdrop-filter: blur(8px); }
.dc-hero-cover .dc-btn-ghost .wp-block-button__link:hover { background: #fff; color: var(--wp--preset--color--primary); box-shadow: none; }

/* Entrada escalonada: primero el logo, y a los 3,5 s el resto.
   Se sirve VISIBLE y es el JavaScript quien lo esconde para animarlo, igual que
   la biografía plegable de F4.17: sin JS se lee todo, nunca queda en blanco. */
.dc-hero-logo-img img { animation: dc-hero-logo 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes dc-hero-logo { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
.dc-hero-reveal { transition: opacity 1s ease-out, transform 1s ease-out; }
.dc-hero-reveal.is-hidden { opacity: 0; transform: translateY(16px); } /* translate-y-4 */

/* Quien pide menos animación ve el hero quieto y el texto desde el principio. */
@media (prefers-reduced-motion: reduce) {
	.dc-hero-logo-img img { animation: none; }
	.dc-hero-reveal, .dc-hero-reveal.is-hidden { opacity: 1; transform: none; transition: none; }
}

/* Una mirada a la firma (CifrasClave): 6 tarjetas, patrón blanco/gris/navy (i%3) */
.dc-hsec--logros { background: var(--wp--preset--color--base); padding: clamp(64px, 9vw, 96px) 0; }
.dc-logros-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dc-logro { position: relative; isolation: isolate; overflow: hidden; border-radius: 18px; padding: 28px; min-height: 180px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.45s cubic-bezier(.16,1,.3,1); } /* rounded-2xl p-7 min-h-[180px] card-lift */
.dc-logro:hover { transform: translateY(-8px); }
.dc-logro--v0 { background: #fff; }
.dc-logro--v1 { background: var(--wp--preset--color--corporate-grey); }
.dc-logro--v2 { background: var(--wp--preset--color--primary); }
/* card-gold-line: barrido dorado diagonal en hover */
.dc-logro::before { content: ""; position: absolute; top: -50%; left: -80%; width: 70%; height: 200%; z-index: 0; background: linear-gradient(90deg, transparent 0%, color-mix(in oklab, var(--wp--preset--color--accent) 55%, transparent) 45%, color-mix(in oklab, var(--wp--preset--color--accent) 70%, transparent) 50%, color-mix(in oklab, var(--wp--preset--color--accent) 55%, transparent) 55%, transparent 100%); opacity: 0.85; filter: blur(14px); transform: skewX(-20deg); transition: left 1.1s cubic-bezier(0.4,0,0.2,1); pointer-events: none; }
.dc-logro:hover::before { left: 180%; }
.dc-logro-badge { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-family: var(--wp--preset--font-family--body); font-size: 10px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; } /* text-[10px] font-semibold uppercase tracking-[0.3em] */
.dc-logro-shape { width: 8px; height: 8px; flex: none; color: var(--wp--preset--color--accent); transition: transform 0.5s cubic-bezier(.16,1,.3,1); }
.dc-logro:hover .dc-logro-shape { transform: scale(1.5); }
/* `overflow-wrap: break-word` porque la tarjeta lleva `overflow: hidden`: sin
   esto, una palabra larga ("especializado", "profesionales") se salía y quedaba
   cortada a media letra contra el borde. */
.dc-logro-title { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; line-height: 1.25; margin: auto 0 0; padding-top: 16px; overflow-wrap: break-word; transition: transform 0.5s cubic-bezier(.16,1,.3,1), color 0.5s cubic-bezier(.16,1,.3,1); } /* mt-auto pt-4 text-2xl font-bold leading-tight */
/* El salto a 30px se mueve de 768 a 1024: a 768 la rejilla son 3 columnas de
   222px y con ese tamaño cabía una palabra por línea. A 1024 las columnas ya
   miden ~300px, que es el ancho para el que está pensado el tamaño del diseño. */
@media (min-width: 1024px) { .dc-logro-title { font-size: 1.875rem; } } /* md:text-3xl */
.dc-logro:hover .dc-logro-title { transform: translateX(4px); }
/* Texto CENTRADO en vertical, no pegado abajo (petición del cliente).
   El título ya trae `margin-top: auto`; dándole al último hijo un
   `margin-bottom: auto`, el hueco libre se reparte entre los dos y el bloque
   queda al medio. Los márgenes automáticos mandan sobre `justify-content`, así
   que no hace falta tocarlo. Cuando la tarjeta solo tiene título, ese título es
   a la vez el primero y el último y recibe los dos `auto`: también se centra. */
.dc-logro > :last-child { margin-bottom: auto; }
/* Líneas adicionales de la tarjeta: mismo peso y tamaño que el título, porque
   en el documento del cliente todas van en negrita y valen lo mismo. */
.dc-logro-lineas { position: relative; z-index: 1; margin: 0; padding: 0; list-style: none; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; line-height: 1.25; overflow-wrap: break-word; transition: transform 0.5s cubic-bezier(.16,1,.3,1), color 0.5s cubic-bezier(.16,1,.3,1); }
@media (min-width: 1024px) { .dc-logro-lineas { font-size: 1.875rem; } }
.dc-logro-lineas li + li { margin-top: 8px; }
/* El "ESPACIO" que pide el documento del cliente entre el título y la línea
   siguiente ("10+ años de experiencia" ⏎ "50+ profesionales", y el Band 1 / Band 2).
   Con una sola regla quedan bien las dos tarjetas, porque en ambas el hueco es
   entre el título y las `lineas`. Es una línea de altura, no un valor suelto. */
.dc-logro-lineas li:first-child { margin-top: 1em; }
.dc-logro:hover .dc-logro-lineas { transform: translateX(4px); }
.dc-logro--v0 .dc-logro-badge, .dc-logro--v1 .dc-logro-badge,
.dc-logro--v0 .dc-logro-title, .dc-logro--v1 .dc-logro-title,
.dc-logro--v0 .dc-logro-lineas, .dc-logro--v1 .dc-logro-lineas { color: var(--wp--preset--color--primary); }
.dc-logro--v2 .dc-logro-badge, .dc-logro--v2 .dc-logro-title, .dc-logro--v2 .dc-logro-lineas { color: #fff; }
.dc-logro--v0:hover .dc-logro-title, .dc-logro--v1:hover .dc-logro-title,
.dc-logro--v0:hover .dc-logro-lineas, .dc-logro--v1:hover .dc-logro-lineas { color: var(--wp--preset--color--primary-hover); }
.dc-logro--v2:hover .dc-logro-title, .dc-logro--v2:hover .dc-logro-lineas { color: var(--wp--preset--color--accent); }
/* entrada stat-reveal (translateY + scale + blur, 1.8s) */
html.dc-motion .dc-logro.dc-reveal { opacity: 0; transform: translateY(32px) scale(0.92); filter: blur(10px); transition: opacity 1.8s cubic-bezier(.16,1,.3,1), transform 1.8s cubic-bezier(.16,1,.3,1), filter 1.1s cubic-bezier(.16,1,.3,1); }
html.dc-motion .dc-logro.dc-reveal.is-revealed { opacity: 1; transform: none; filter: blur(0); }

/* Enfoque (navy) — fiel a index.tsx › Enfoque: encabezado grid [280px 1fr] + tarjetas 4:3 grayscale */
.dc-enfoque-sec { background: var(--wp--preset--color--primary); color: #fff; }
.dc-enfoque-head { display: grid; gap: 40px; border-top: 1px solid rgba(255,255,255,0.1); padding-top: clamp(48px, 7vw, 64px); padding-bottom: clamp(40px, 6vw, 64px); }
.dc-enfoque-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2.25rem; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0; }
.dc-enfoque-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); padding-bottom: clamp(56px, 8vw, 80px); }
.dc-enfoque-card { background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dc-enfoque-img { aspect-ratio: 4 / 3; overflow: hidden; }
/* El bloque de imagen de Gutenberg mete un <figure> entre el contenedor y el
   <img>: sin esto el alto del 100% se mide contra el figure y la foto deja de
   llenar el 4:3. */
.dc-enfoque-img > figure { height: 100%; margin: 0; }
.dc-enfoque-img img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.dc-enfoque-body { padding: 24px; }
.dc-enfoque-body h3 { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.125rem; line-height: 1.35; text-transform: uppercase; color: var(--wp--preset--color--primary); margin: 0; text-align: left; }
.dc-enfoque-body p { color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin: 12px 0 0; font-size: 0.875rem; line-height: 1.5; }
@media (min-width: 768px) { .dc-enfoque-head { grid-template-columns: 280px 1fr; } }
@media (max-width: 767px) { .dc-enfoque-grid, .dc-logros-grid { grid-template-columns: 1fr; } }

/* Reconocimientos (hielo) */
.dc-hsec--recos { background: var(--wp--preset--color--surface-elevated); padding: 80px 0; }
/* (los estilos de tarjeta de premio están en el bloque "Reconocimientos (slide)" más abajo) */

/* Hitos (scroller horizontal · fiel a index.tsx › Milestones) */
.dc-hsec--hitos { background: color-mix(in oklab, var(--wp--preset--color--surface-elevated) 45%, #fff); padding: clamp(56px, 8vw, 80px) 0; }
.dc-timeline { display: flex; align-items: stretch; gap: 32px; list-style: none; padding: 16px 0 8px; margin: 0; min-width: max-content; }
.dc-tl-item { width: 340px; flex-shrink: 0; scroll-snap-align: start; }
.dc-tl-img { position: relative; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dc-tl-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s cubic-bezier(.16,1,.3,1); }
.dc-tl-item:hover .dc-tl-img img { transform: scale(1.06); }
.dc-tl-overlay { position: absolute; inset: 0; background: color-mix(in oklab, var(--wp--preset--color--primary) 45%, transparent); transition: background 0.5s var(--wp--custom--ease); pointer-events: none; }
.dc-tl-item:hover .dc-tl-overlay { background: color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); }
.dc-tl-line { position: relative; margin-top: 16px; height: 1px; width: 100%; background: color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent); }
.dc-tl-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 12px; height: 12px; border-radius: 50%; background: var(--wp--preset--color--primary); transition: transform 0.3s, background 0.3s; }
.dc-tl-item:hover .dc-tl-dot { transform: translate(-50%, -50%) scale(1.25); background: var(--wp--preset--color--accent); }
.dc-tl-anio { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.875rem, 2.4vw, 2.25rem); font-weight: 700; color: var(--wp--preset--color--primary); margin: 20px 0 0; line-height: 1; transition: color 0.3s; }
.dc-tl-item:hover .dc-tl-anio { color: var(--wp--preset--color--accent); }
.dc-tl-label { color: color-mix(in oklab, var(--wp--preset--color--primary) 75%, transparent); margin: 8px 0 0; font-size: 1rem; line-height: 1.375; }

/* Áreas destacadas (navy) */
.dc-hsec--areasd { background: var(--wp--preset--color--primary); padding: clamp(80px, 10vw, 112px) 0; }
.dc-hsec--areasd .dc-hsec-title { color: #fff; }
.dc-areasd-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.dc-aread { display: block; text-decoration: none; border: 1px solid rgba(255,255,255,0.15); border-radius: 14px; padding: 22px; background: rgba(255,255,255,0.04); transition: border-color .3s var(--wp--custom--ease), background .3s var(--wp--custom--ease); }
.dc-aread:hover { border-color: var(--wp--preset--color--accent); background: rgba(255,255,255,0.08); }
.dc-aread-name { font-family: var(--wp--preset--font-family--heading); font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 8px; }
.dc-aread-short { color: rgba(255,255,255,0.62); font-size: 0.9rem; line-height: 1.45; margin: 0 0 16px; }
.dc-aread-more { color: var(--wp--preset--color--accent); font-size: 0.82rem; font-weight: 600; }
.dc-areasd-all { margin: 32px 0 0; }
.dc-areasd-all a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 2px solid var(--wp--preset--color--accent); padding-bottom: 2px; }

@media (max-width: 900px) {
	.dc-recos-grid, .dc-areasd-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.dc-recos-grid, .dc-areasd-grid { grid-template-columns: 1fr; }
	.dc-tl-item { width: 240px; }
}

/* ========================================================================
   Portada v2 — fiel al link (hero logo, carrusel, scroller, newsletter)
   ======================================================================== */

/* Hero logo (placeholder de texto hasta el logo real) */
.dc-hero-logo { text-align: center; margin: 0 0 18px; font-family: var(--wp--preset--font-family--heading); font-weight: 800; line-height: 1; }
.dc-hero-logo-name { font-size: clamp(2.4rem, 6vw, 4.2rem); color: #fff; letter-spacing: -0.02em; }
.dc-hero-logo-name b { color: var(--wp--preset--color--accent); }
.dc-hero-logo-sub { display: block; margin-top: 6px; font-size: clamp(0.7rem, 1.4vw, 1rem); letter-spacing: 0.5em; color: var(--wp--preset--color--accent); text-transform: uppercase; }

/* Carrusel genérico */
.dc-carousel { position: relative; }
.dc-carousel-viewport { overflow: hidden; }
.dc-carousel-track { display: flex; transition: transform .7s cubic-bezier(.16,1,.3,1); }
.dc-carousel-slide { flex: 0 0 100%; min-width: 100%; box-sizing: border-box; padding: 0 4px; }
.dc-carousel-prev, .dc-carousel-next { position: absolute; top: 42%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--wp--preset--color--border); background: #fff; color: var(--wp--preset--color--primary); font-size: 22px; line-height: 1; cursor: pointer; box-shadow: var(--wp--custom--shadow--card); transition: background .2s, color .2s; }
.dc-carousel-prev:hover, .dc-carousel-next:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base-deep); border-color: transparent; }
.dc-carousel-prev { left: -10px; }
.dc-carousel-next { right: -10px; }
.dc-carousel-dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.dc-carousel-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 999px; background: var(--wp--preset--color--border-strong); cursor: pointer; transition: width .3s, background .3s; }
.dc-carousel-dots button[aria-current="true"] { width: 28px; background: var(--wp--preset--color--accent); }

/* Reconocimientos (slide = tarjeta de premio 2 columnas · fiel a index.tsx › Testimonial) */
.dc-recos-carousel .dc-reco { background: none; box-shadow: none; padding: 0; margin: 0; }
.dc-reco-card { display: flex; flex-direction: column; align-items: center; gap: 32px; background: #fff; border-radius: 18px; padding: 32px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.dc-reco-logo { position: relative; display: flex; height: 160px; width: 100%; flex: none; align-items: center; justify-content: center; margin: 0; }
.dc-reco-logo img { max-height: 100%; max-width: 80%; width: auto; height: auto; object-fit: contain; border-radius: 18px; filter: drop-shadow(0 10px 24px rgba(14,44,112,0.22)); animation: dc-logo-float 4s ease-in-out infinite; }
.dc-reco-quote-wrap { color: var(--wp--preset--color--primary); margin: 0; }
.dc-reco-mark { display: block; font-family: var(--wp--preset--font-family--serif); font-style: italic; font-weight: 900; font-size: 10rem; line-height: 0.65; color: var(--wp--preset--color--accent); margin: 0 0 -1.25rem -0.5rem; }
.dc-reco-quote { font-style: italic; font-size: 1rem; line-height: 1.65; color: color-mix(in oklab, var(--wp--preset--color--primary) 90%, transparent); margin: 0; }
.dc-reco-source { margin: 16px 0 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.875rem; color: var(--wp--preset--color--primary); }
@media (min-width: 768px) {
	.dc-reco-card { display: grid; grid-template-columns: 220px 1fr; align-items: center; gap: 32px; padding: 48px; }
	.dc-reco-logo { height: 208px; }
	.dc-reco-quote { font-size: 1.125rem; }
}
@keyframes dc-logo-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

/* Scroller (hitos) */
.dc-scroller { position: relative; }
.dc-scroller-viewport { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.dc-scroller-viewport::-webkit-scrollbar { display: none; }
.dc-scroller-prev, .dc-scroller-next { position: absolute; top: 38%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: none; background: var(--wp--preset--color--primary); color: #fff; font-size: 20px; cursor: pointer; box-shadow: var(--wp--custom--shadow--card); }
.dc-scroller-prev:hover, .dc-scroller-next:hover { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--base-deep); }
.dc-scroller-prev { left: -8px; }
.dc-scroller-next { right: -8px; }

/* Enfoque: intro (columna derecha del encabezado) */
.dc-enfoque-intro p { color: rgba(255,255,255,0.85); margin: 0; font-size: 1rem; line-height: 1.6; }
.dc-enfoque-intro p.dc-enfoque-intro-2 { margin-top: 12px; color: rgba(255,255,255,0.7); }
.dc-enfoque-intro strong { color: #fff; }

/* Áreas: encabezado editorial */
.dc-areasd-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 44px); }
.dc-areasd-title { font-family: var(--wp--preset--font-family--heading); font-weight: 800; font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.02; color: #fff; margin: 8px 0 0; letter-spacing: -0.02em; }
.dc-areasd-title em { font-style: italic; color: var(--wp--preset--color--accent); }
.dc-areasd-aside { text-align: right; max-width: 340px; }
.dc-areasd-aside p { color: rgba(255,255,255,0.8); margin: 0 0 16px; }
.dc-areasd-btn { display: inline-block; color: #fff; font-weight: 700; text-decoration: none; border: 1px solid rgba(255,255,255,0.25); border-radius: 8px; padding: 10px 18px; transition: border-color .2s, background .2s; }
.dc-areasd-btn:hover { border-color: var(--wp--preset--color--accent); background: rgba(255,255,255,0.06); }

/* Franja Newsletter */
.dc-hsec--news { background: var(--wp--preset--color--surface-elevated); text-align: center; padding: 80px 0; }
.dc-news-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(1.875rem, 3vw, 2.25rem); color: var(--wp--preset--color--contrast); margin: 0 0 16px; line-height: 1.2; }
.dc-hsec--news .dc-wrap { max-width: 768px; } /* max-w-3xl */
.dc-news-sub { color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin: 0 auto 24px; }
/* .dc-news-btn usa el botón global .dc-btn--solid (traduce GoldButton). Solo el margen es propio. */

/* ===== Página Servicios (interna) — fiel a servicios.index.tsx ===== */
/* PageHeader (modo backgroundImage): overlay bg-brand/85 + gradient-to-t from-brand via-brand/60 to-brand/30 */
/* Imagen por defecto del banner. La sobrescribe la Imagen destacada de la
   Página cuando existe (ver dc_page_banner_bg en inc/blocks.php). */
.dc-page-banner { --dc-banner-bg: url("../images/office-building-hero.jpg"); }
.dc-page-banner { position: relative; overflow: hidden; background-color: var(--wp--preset--color--primary); background-image: linear-gradient(to top, var(--wp--preset--color--primary) 0%, color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent) 50%, color-mix(in oklab, var(--wp--preset--color--primary) 30%, transparent) 100%), linear-gradient(color-mix(in oklab, var(--wp--preset--color--primary) 85%, transparent), color-mix(in oklab, var(--wp--preset--color--primary) 85%, transparent)), var(--dc-banner-bg); background-size: cover; background-position: center; padding: 96px 0; color: #fff; text-align: center; }
@media (min-width: 768px) { .dc-page-banner { padding: 128px 0; } }
.dc-page-banner-inner { max-width: 900px; }
.dc-page-banner-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(2.1rem, 5vw, 3rem); line-height: 1.05; letter-spacing: -0.01em; color: #fff; margin: 0; }
.dc-page-banner-title em { font-style: italic; color: rgba(255,255,255,0.8); }
/* La barra que abre los títulos es un ADORNO del diseño, no parte del texto.
   Va en ::before para que el h1 diga "Contacto" y no "/ Contacto": ese texto es
   lo que leen Google y un lector de pantalla, y ahí una barra no significa nada.
   Mismo criterio que los adornos del eyebrow en F4.9, con la misma ventaja: el
   cliente no puede borrarla al editar el encabezado. */
.dc-page-banner-title::before,
.dc-abanner-title::before { content: "/ "; }
.dc-page-banner-sub { max-width: 640px; margin: 18px auto 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,0.92); }
/* py-20 md:py-28 + el resplandor dorado difuminado de cada sección */
.dc-serv-areas { background: var(--wp--preset--color--base); padding: 80px 0; position: relative; overflow: hidden; }
.dc-serv-industrias { background: var(--wp--preset--color--primary); color: #fff; padding: 80px 0; position: relative; overflow: hidden; }
@media (min-width: 768px) { .dc-serv-areas, .dc-serv-industrias { padding: 112px 0; } }
.dc-serv-areas::before { content: ""; position: absolute; left: -160px; top: 33%; width: 520px; height: 520px; border-radius: 50%; opacity: 0.3; filter: blur(64px); background: radial-gradient(closest-side, var(--wp--preset--color--accent) 0%, transparent 70%); pointer-events: none; }
.dc-serv-industrias::before { content: ""; position: absolute; right: -128px; top: 40px; width: 288px; height: 288px; border-radius: 50%; opacity: 0.25; filter: blur(64px); background: radial-gradient(closest-side, var(--wp--preset--color--accent) 0%, transparent 70%); pointer-events: none; }
.dc-serv-areas > .dc-wrap, .dc-serv-industrias > .dc-wrap { position: relative; }
/* grid gap-10 md:grid-cols-12 · izquierda col-span-5 · derecha col-span-6 col-start-7 */
.dc-serv-head { display: grid; gap: 40px; grid-template-columns: 1fr; margin-bottom: 56px; }
.dc-serv-head--dark { margin-bottom: 48px; }
@media (min-width: 768px) {
	.dc-serv-head { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.dc-serv-head-l { grid-column: span 5; }
	.dc-serv-head-r { grid-column: 7 / span 6; }
	.dc-serv-areas .dc-serv-head-r { padding-top: 24px; } /* md:pt-6 */
	.dc-serv-head--dark { align-items: end; }              /* md:items-end */
}
.dc-eyebrow-line { display: inline-flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin: 0 0 24px; }
/* La rayita dorada es un pseudo-elemento y no un <span> vacío: así el párrafo
   se edita en Gutenberg sin que el cliente pueda borrarla sin querer. */
.dc-eyebrow-line::before { content: ""; display: block; width: 32px; height: 1px; background: var(--wp--preset--color--accent); flex: none; }
.dc-eyebrow-line--gold { color: var(--wp--preset--color--accent); }
.dc-serv-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: clamp(2.2rem, 5vw, 3rem); line-height: 0.98; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); margin: 0; }
.dc-serv-title em { font-style: italic; color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-serv-title--gold { color: #fff; }
.dc-serv-title--gold em { color: var(--wp--preset--color--accent); }
.dc-serv-head-r p { line-height: 1.625; margin: 0; }
.dc-serv-areas .dc-serv-head-r p { font-size: 1.125rem; }   /* text-lg */
.dc-serv-industrias .dc-serv-head-r p { font-size: 1rem; }  /* text-base */
.dc-serv-areas .dc-serv-head-r p { color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); }
.dc-serv-industrias .dc-serv-head-r p { color: rgba(255,255,255,0.75); }
.dc-areas-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent); }
.dc-area-row { border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 12%, transparent); }
.dc-area-row > a { position: relative; display: flex; align-items: center; gap: 20px; padding: 20px 12px; text-decoration: none; overflow: hidden; text-align: left; }
.dc-area-row .dc-area-num { flex: 0 0 34px; }
.dc-area-row .dc-area-name { flex: 1 1 auto; min-width: 0; }
.dc-area-row .dc-area-short { flex: 0 0 19rem; }
.dc-area-row .dc-area-arrow { flex: 0 0 auto; margin-left: 4px; }
.dc-area-row > a::before { content: ""; position: absolute; inset: 0; width: 0; background: linear-gradient(to right, color-mix(in oklab, var(--wp--preset--color--accent) 15%, transparent), transparent); transition: width 0.5s var(--wp--custom--ease); z-index: 0; }
.dc-area-row > a:hover::before { width: 100%; }
.dc-area-num { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.75rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent); }
.dc-area-name { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: clamp(1.4rem, 2.4vw, 1.875rem); letter-spacing: -0.01em; color: var(--wp--preset--color--primary); margin: 0; transition: transform 0.5s var(--wp--custom--ease); }
.dc-area-row > a:hover .dc-area-name { transform: translateX(12px); }
.dc-area-short { position: relative; z-index: 1; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); margin: 0; }
.dc-area-arrow { position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); transition: border-color 0.3s var(--wp--custom--ease), background-color 0.3s var(--wp--custom--ease), color 0.3s var(--wp--custom--ease); } /* grid h-9 w-9 rounded-full border-brand/20 text-brand/60 */
.dc-area-arrow svg { transition: transform 0.3s var(--wp--custom--ease); }
.dc-area-row > a:hover .dc-area-arrow { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); } /* group-hover:border-gold group-hover:bg-gold group-hover:text-gold-foreground */
.dc-area-row > a:hover .dc-area-arrow svg { transform: rotate(-45deg); } /* group-hover:-rotate-45 (solo la flecha) */
@media (max-width: 900px) { .dc-area-row > a { grid-template-columns: 2rem 1fr auto; } .dc-area-short { display: none; } }
@media (max-width: 560px) { .dc-area-arrow { display: none; } }
/* Adaptación al CONTENEDOR, no solo al viewport: la fila sigue siendo legible
   dentro del editor de bloques o de una columna estrecha, donde la ventana es
   ancha pero la caja no. Los umbrales están por debajo de los de las media
   queries de arriba, así que en el front nunca llegan a activarse: lo que se
   publica no cambia ni un píxel. */
.dc-serv-areas > .dc-wrap,
.dc-serv-industrias > .dc-wrap { container: dc-seccion / inline-size; }
.dc-areas-listado { container: dc-listado / inline-size; }
@container dc-listado (max-width: 700px) { .dc-area-short { display: none; } }
@container dc-listado (max-width: 420px) { .dc-area-arrow { display: none; } }
@container dc-seccion (max-width: 660px) {
	.dc-serv-head { grid-template-columns: 1fr; }
	.dc-serv-head-l, .dc-serv-head-r { grid-column: auto; }
	.dc-serv-areas .dc-serv-head-r { padding-top: 0; }
}
/* Gutenberg inyecta margen entre bloques hermanos (layout de flujo). Solo se
   neutraliza en los elementos que no traen margen propio —los contenedores que
   genera el editor—; los márgenes explícitos del diseño se respetan. */
.dc-serv-head > .wp-block-group,
.dc-wrap > .dc-areas-listado,
.dc-wrap > .dc-industrias-pills { margin-block-start: 0; }

/* Gutenberg inyecta `margin-block-start: 24px` a los hijos de los contenedores
   que genera (:where(.is-layout-flow) > *). Se neutraliza SOLO en las rejillas
   y cabeceras de la portada, que ya tienen su propio `gap`; un `> *` amplio se
   comería los márgenes explícitos del diseño. */
.dc-enfoque-head > *,
.dc-enfoque-grid > *,
.dc-enfoque-body > *,
.dc-a5-head > *,
.dc-a5-head-l > *,
.dc-a5-head-r > *,
.dc-hsec > .dc-wrap > .dc-logros-grid,
.dc-hsec > .dc-wrap > .dc-scroller,
.dc-hsec > .dc-wrap > .dc-carousel { margin-block-start: 0; }
/*
 * Aquí NO va `.dc-a5-grid`: su `margin-top: 48px` es el `mt-12` del diseño, no
 * un margen inyectado. La regla de Gutenberg va en un `:where()` de
 * especificidad 0, así que el valor del diseño ya gana solo. Neutralizarlo
 * también dejaba las tarjetas pegadas al botón.
 */
/* El botón conserva su separación propia del diseño (mt-6)… */
.dc-a5-head-r > .dc-a5-btn-wrap { margin-block-start: 24px; }
/* …y se alinea a la derecha: .wp-block-buttons es flex y el `text-align` del
   padre no mueve a sus hijos. */
/* Dos botones ("Ver todas las áreas" y "Ver todas las industrias") APILADOS,
   no uno al lado del otro: el cliente los pidió uno debajo del otro. En columna
   hace falta `align-items` —`justify-content` ya no alinea en horizontal— o se
   estirarían a todo el ancho de la columna. */
.dc-a5-btn-wrap { justify-content: flex-end; flex-direction: column; align-items: flex-end; gap: 12px; }
/* Contenedor del listado: es lo que se sustituye al paginar sin recargar. */
.dc-areas-listado { outline: none; }
.dc-areas-listado.is-cargando { opacity: 0.55; transition: opacity 0.2s var(--wp--custom--ease); }
.dc-pagination--mas { justify-content: center; }
.dc-cargar-mas { margin-top: 8px; }
/* Paginación del listado de áreas (solo visible con más de una página). */
.dc-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 48px; }
.dc-pagination .page-numbers { display: inline-flex; align-items: center; gap: 8px; min-width: 40px; height: 40px; padding: 0 12px; justify-content: center; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); border-radius: 999px; font-family: var(--wp--preset--font-family--mono, monospace); font-size: 0.8rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); text-decoration: none; transition: border-color 0.3s var(--wp--custom--ease), background-color 0.3s var(--wp--custom--ease), color 0.3s var(--wp--custom--ease); }
.dc-pagination a.page-numbers:hover { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); }
.dc-pagination .page-numbers.current { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: #fff; }
.dc-pagination .page-numbers.dots { border-color: transparent; }
.dc-pagination .dc-pag-prev { display: inline-flex; transform: rotate(180deg); }
@media (max-width: 560px) { .dc-pagination .prev span:not(.dc-pag-prev), .dc-pagination .next span:first-child { display: none; } }
.dc-industrias-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.dc-industrias-pills a { display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255,255,255,0.15); background: rgba(255,255,255,0.05); border-radius: 999px; padding: 8px 16px; font-size: 0.9rem; color: rgba(255,255,255,0.85); text-decoration: none; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.dc-industrias-pills a:hover { border-color: var(--wp--preset--color--accent); background: rgba(255,255,255,0.1); color: #fff; }
.dc-pill-shape { width: 8px; height: 8px; flex: none; color: var(--wp--preset--color--accent); }

/* ===== Página Equipo (interna) — acordeón por grupo + PersonCard ===== */
.dc-team-section { background: var(--wp--preset--color--base); padding: clamp(48px, 7vw, 72px) 0; }
.dc-team-acc { scroll-margin-top: 120px; }
.dc-team-acc + .dc-team-acc { margin-top: 24px; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--corporate-grey) 45%, transparent); }
.dc-team-sum { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; cursor: pointer; padding: 24px 0; }
.dc-team-sum::-webkit-details-marker { display: none; }
.dc-team-sum-l { display: flex; flex-direction: column; gap: 4px; }
@media (min-width: 768px) { .dc-team-sum-l { flex-direction: row; align-items: baseline; gap: 32px; } }
.dc-team-gname { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; line-height: 1.2; color: var(--wp--preset--color--primary); }
.dc-team-tag { font-size: 0.875rem; line-height: 1.5; color: color-mix(in oklab, var(--wp--preset--color--accent) 85%, #7a5b00); }
.dc-team-chev { flex: none; display: inline-flex; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); transition: transform 0.3s; }
.dc-team-acc[open] .dc-team-chev { transform: rotate(180deg); }
/* `minmax(0, 1fr)` y no `1fr`: el correo de la tarjeta lleva `white-space:
   nowrap`, así que su min-content es el ancho completo del texto y con `1fr`
   las columnas no podían encoger por debajo de eso. A 768px las 3 columnas
   sumaban 784px en un contenedor de 707 y la tercera se salía 47px de la
   pantalla. Con `minmax(0, …)` la columna manda y el correo se corta con
   puntos suspensivos, que es justo para lo que tiene el `text-overflow`. */
/*
 * Una columna hasta 640, dos hasta 1024 y tres por encima.
 *
 * ⚠️ La tercera columna se retrasa de 768 a 1024 A PROPÓSITO. El zip usa
 * `md:grid-cols-3` (768), pero la tarjeta reserva 96px de foto + 16 de hueco,
 * así que a 768 la columna de datos se quedaba en **102px** y los chips —con
 * nombres reales como "Litigios, Arbitrajes y Solución de Controversias"— se
 * salían de su caja. A 1024 la columna de datos sube a ~180px y entran.
 * El zip no lo previó porque sus áreas de muestra tenían nombres cortos.
 */
.dc-team-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 32px; padding-bottom: 24px; overflow: hidden; transition: height 0.42s cubic-bezier(.16,1,.3,1); }
@media (min-width: 640px) { .dc-team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dc-team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.dc-person { display: flex; align-items: flex-start; gap: 16px; }
/* Fondo neutro bajo la foto: los retratos vienen recortados con transparencia,
   así que sin él la silueta flotaba sobre el blanco de la página. */
.dc-person-photo { position: relative; flex: none; display: grid; place-items: center; width: 96px; height: 112px; overflow: hidden; border-radius: 8px; background: var(--wp--preset--color--surface-elevated); text-decoration: none; transition: opacity .3s ease; }
.dc-person-photo:hover { opacity: .9; }
.dc-person-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; transition: transform 0.3s; } /* el rounded-md lo da el contenedor (overflow:hidden), no la img */
.dc-person-photo:hover img { transform: scale(1.05); }
.dc-person-ph { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); }
.dc-person-ph-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-person-ini { position: relative; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.125rem; color: var(--wp--preset--color--primary); }
/* Las columnas del listado bajan a 214px en tablet y los textos traen palabras
   sin espacios donde partir ("Consumo/Derecho", correos): sin esto se salían
   de la tarjeta y los recortaba el `overflow: hidden` de la rejilla. */
.dc-person-info { min-width: 0; }
.dc-person-name, .dc-person-role { overflow-wrap: break-word; }
.dc-person-name { display: inline-block; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1rem; line-height: 1.25; color: var(--wp--preset--color--primary); text-decoration: none; transition: color .2s ease; }
@media (min-width: 640px) { .dc-person-name { font-size: 1.125rem; } } /* sm:text-lg */
.dc-person-name:hover { color: var(--wp--preset--color--base-deep); }
/* Cargo en versalitas con interletrado, gris corporativo (PersonCard del zip nuevo). */
.dc-person-role { display: block; margin: 2px 0 0; font-size: 0.75rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.2em; color: var(--wp--preset--color--corporate-grey); }

/* Chips de áreas de práctica. Salen de la relación, así que cada uno es un
   enlace real a su página. A 10px (el tamaño del zip) no se leen, así que van a
   11px, y a 12px por debajo de 640 donde la tarjeta ocupa todo el ancho: ahí hay
   sitio de sobra y el chip además es una zona táctil. */
.dc-person-areas { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
/* `max-width` + `overflow-wrap`: red de seguridad para que un nombre de área
   largo parta dentro del chip en vez de salirse de la columna. */
.dc-person-chip { display: inline-block; max-width: 100%; padding: 4px 8px; border: 1px solid var(--wp--preset--color--border); border-radius: 4px; background: var(--wp--preset--color--surface-elevated); font-size: 0.6875rem; font-weight: 500; line-height: 1.3; color: var(--wp--preset--color--primary); text-decoration: none; overflow-wrap: anywhere; transition: background-color .2s ease, border-color .2s ease; }
@media (max-width: 639px) { .dc-person-chip { font-size: 0.75rem; padding: 5px 10px; } }
.dc-person-chip:hover { background: var(--wp--preset--color--base); border-color: var(--wp--preset--color--accent); }
/* El correo ENVUELVE en vez de cortarse. Con `nowrap` + elipsis, en tablet la
   columna mide 214px y el correo se quedaba en "ldiezcansec…", ilegible y sin
   ser un enlace. Envolver ocupa una línea más solo donde no cabe; en escritorio
   sigue entrando de una. `overflow-wrap: anywhere` porque un correo no tiene
   espacios donde partir. */
/* El correo pasa a ser un enlace `mailto:` con icono (PersonCard del zip nuevo).
   Sigue ENVOLVIENDO en vez de truncarse: en tablet la columna baja a 214px y
   con elipsis quedaba ilegible (ver F4.23). */
.dc-person-email { display: inline-flex; align-items: flex-start; gap: 6px; max-width: 100%; margin-top: 8px; font-size: 0.75rem; font-weight: 500; line-height: 1.4; color: var(--wp--preset--color--base-deep); text-decoration: none; overflow-wrap: anywhere; transition: color .2s ease; }
.dc-person-email svg { flex: none; margin-top: 2px; opacity: .7; }
.dc-person-email:hover { color: var(--wp--preset--color--primary); }
.dc-person-li { display: inline-flex; margin-top: 8px; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); transition: color .2s ease; }
.dc-person-li:hover { color: var(--wp--preset--color--primary); }

/* ==========================================================================
   Single Miembro — traducción de `src/routes/equipo.$slug.tsx`
   --------------------------------------------------------------------------
   Estructura del zip nuevo con los tokens que ya tiene el tema: `primary` es
   el mismo #0E2C70 que Lovable llama `brand`, y `accent` el mismo #F2B221 que
   llama `gold`. Las transparencias (brand/90, /75, /20…) se resuelven con
   color-mix, como en el resto de la hoja.

   El masthead va sobre `base` (blanco) y no sobre `surface-elevated`: los
   retratos vienen recortados con fondo blanco y la foto encaja con `contain`,
   así que sobre una franja de color se vería el rectángulo blanco flotando.

   Las tres piezas de primer nivel declaran `margin: 0` a propósito. El layout
   de flujo de Gutenberg inyecta `margin-block-start: 24px` a los hijos del
   grupo de la plantilla, y aquí el diseño pide cero: la barra tiene que quedar
   pegada al masthead. Es un margen del diseño, no una neutralización amplia.
   ========================================================================== */

/* --- Masthead ------------------------------------------------------------ */
.dc-mp-masthead { position: relative; margin: 0; background: var(--wp--preset--color--base); padding-top: 24px; }
@media (min-width: 768px) { .dc-mp-masthead { padding-top: 40px; } }

.dc-mp-back { display: inline-flex; align-items: center; gap: 8px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; text-decoration: none; color: color-mix(in oklab, var(--wp--preset--color--primary) 55%, transparent); transition: color .2s ease; }
.dc-mp-back:hover { color: var(--wp--preset--color--primary); }
.dc-mp-back svg { flex: none; }

.dc-mp-grid { display: grid; grid-template-columns: 1fr; align-items: stretch; gap: 32px; margin-top: 24px; padding-top: 32px; }
@media (min-width: 768px) {
	.dc-mp-grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: 48px; margin-top: 32px; padding-top: 48px; }
}

.dc-mp-photo-col { position: relative; margin-bottom: 16px; }
@media (min-width: 768px) { .dc-mp-photo-col { display: flex; height: 100%; align-items: flex-end; margin-bottom: 0; } }
.dc-mp-photo { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
/* `contain` + anclado abajo: el retrato se apoya en la base del bloque sin recortarse. */
.dc-mp-photo img { width: 100%; height: 100%; object-fit: contain; object-position: bottom; }
.dc-mp-ini { position: absolute; inset: 0; display: grid; place-items: center; color: color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); }
.dc-mp-ini-shape { position: absolute; inset: 0; width: 100%; height: 100%; }
.dc-mp-ini-t { position: relative; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 3.75rem; color: var(--wp--preset--color--primary); }

.dc-mp-head { min-width: 0; padding-bottom: 40px; }
@media (min-width: 768px) { .dc-mp-head { padding-top: 16px; padding-bottom: 64px; } }
.dc-mp-eyebrow { margin: 0 0 12px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.32em; color: var(--wp--preset--color--accent); }
.dc-mp-name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1.02; color: var(--wp--preset--color--primary); }
@media (min-width: 640px)  { .dc-mp-name { font-size: 2.25rem; } }
@media (min-width: 768px)  { .dc-mp-name { font-size: 3rem; } }
@media (min-width: 1024px) { .dc-mp-name { font-size: 3.4rem; } }
.dc-mp-role { margin: 12px 0 0; font-size: 1.125rem; line-height: 1.375; color: var(--wp--preset--color--primary); }
@media (min-width: 768px) { .dc-mp-role { font-size: 1.25rem; } }

.dc-mp-meta { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 32px; padding-top: 24px; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); }
@media (min-width: 640px) { .dc-mp-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.dc-mp-meta-col { min-width: 0; font-size: 0.875rem; }
.dc-mp-label { margin: 0; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: color-mix(in oklab, var(--wp--preset--color--primary) 45%, transparent); }
.dc-mp-meta-val { margin: 8px 0 0; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 75%, transparent); }
.dc-mp-mail { display: flex; min-width: 0; align-items: center; gap: 8px; margin-top: 8px; text-decoration: none; color: var(--wp--preset--color--primary); transition: color .2s ease; }
.dc-mp-mail:hover { color: var(--wp--preset--color--accent); }
.dc-mp-mail svg { flex: none; color: var(--wp--preset--color--accent); }
/* Envuelve en vez de cortarse: a 768px la columna de contacto mide 159px y el
   correo necesita 157 de texto, así que con elipsis quedaba "dschmerler@dcleg…".
   Un dato de contacto ilegible no sirve; una línea de más, sí. */
.dc-mp-mail span { overflow-wrap: anywhere; }

/* --- Barra de secciones -------------------------------------------------- */
/*
 * Dos desvíos deliberados respecto al zip, por decisión del usuario:
 *
 * 1. NO es fija. El zip la deja `sticky` bajo su header de 72px; el nuestro
 *    mide 127 y con la barra encima se comía la fila del menú. Aquí scrollea
 *    con la página. `--dc-header-h` (que mide theme.js) se sigue usando para
 *    el offset del anclaje, porque el header sí sigue siendo fijo.
 *
 * 2. NO scrollea en horizontal: **se ven todas las pestañas siempre**. El zip
 *    usa `overflow-x: auto`, que a 1240 ya cortaba "Una mirada personal" y en
 *    móvil dejaba fuera cuatro de cinco sin ningún indicio de que hubiera más.
 *    Con `flex-wrap` las pestañas saltan de fila, y `flex: 1 1 auto` hace que
 *    cada fila se complete: así los filetes verticales caen justo en el borde
 *    del contenedor en vez de quedar colgando a media barra.
 */
.dc-mp-bar { margin: 0; background: var(--wp--preset--color--primary); border-top: 1px solid rgba(255,255,255,.15); }
.dc-mp-bar-list { display: flex; flex-wrap: wrap; align-items: stretch; margin: 0; padding-top: 0; padding-bottom: 0; list-style: none; }
.dc-mp-bar-item { flex: 1 1 auto; border-right: 1px solid rgba(255,255,255,.15); border-bottom: 1px solid rgba(255,255,255,.15); }
.dc-mp-bar-item:last-child { border-right: 0; }
/* `box-sizing` explícito otra vez: sin reset global, `height: 100%` daría el
   alto de la fila MÁS los 32px de padding, y el subrayado dorado —que va a
   `bottom: 0`— caía 31px por debajo de su pestaña, ya en la fila siguiente. */
.dc-mp-bar-link { box-sizing: border-box; position: relative; display: block; height: 100%; padding: 16px 20px; font-size: 0.75rem; font-weight: 600; line-height: 1.4; text-transform: uppercase; letter-spacing: 0.18em; text-decoration: none; color: rgba(255,255,255,.7); transition: color .2s ease; }
@media (min-width: 768px) { .dc-mp-bar-link { padding-left: 28px; padding-right: 28px; } }
.dc-mp-bar-link:hover { color: #fff; }
.dc-mp-bar-link.is-active { color: #fff; }
.dc-mp-bar-ind { position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; background: var(--wp--preset--color--accent); opacity: 0; transition: opacity .2s ease; }
.dc-mp-bar-link.is-active .dc-mp-bar-ind { opacity: 1; }

/* --- Cuerpo -------------------------------------------------------------- */
.dc-mp-body-wrap { margin: 0; background: var(--wp--preset--color--base); }
/* `box-sizing` explícito: el tema no trae reset global, así que `.dc-wrap` es
   content-box y un max-width de 896 daría 896 de texto MÁS el gutter. El zip usa
   `max-w-4xl px-6` con el preflight de Tailwind, o sea border-box. Misma trampa
   que en F4.11, y se declara igual: acotado a este elemento, sin tocar .dc-wrap. */
.dc-mp-main { box-sizing: border-box; max-width: 768px; padding-top: 56px; padding-bottom: 80px; }
@media (min-width: 768px)  { .dc-mp-main { padding-top: 64px; padding-bottom: 112px; } }
@media (min-width: 1024px) { .dc-mp-main { max-width: 896px; } }

/* Solo descuenta el header, que es lo único fijo desde que la barra dejó de serlo. */
.dc-mp-sec { scroll-margin-top: calc(var(--dc-header-h, 72px) + 24px); margin-top: 56px; padding-top: 48px; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); }
@media (min-width: 768px) { .dc-mp-sec { margin-top: 64px; padding-top: 56px; } }
.dc-mp-sec--first { margin-top: 0; padding-top: 0; border-top: 0; }
.dc-mp-sec-title { margin: 0; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.025em; color: var(--wp--preset--color--primary); }
@media (min-width: 768px) { .dc-mp-sec-title { font-size: 1.5rem; } }
.dc-mp-slash { color: var(--wp--preset--color--accent); }
.dc-mp-sec-body { margin-top: 24px; }
@media (min-width: 768px) { .dc-mp-sec-body { margin-top: 28px; } }

/* Biografía: se sirve desplegada; el plegado lo activa el JS (ver theme.js). */
.dc-mp-bio-p { margin: 0; font-size: 1.125rem; font-weight: 300; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 90%, transparent); }
@media (min-width: 768px) { .dc-mp-bio-p { font-size: 1.25rem; } }
.dc-mp-bio-p + .dc-mp-bio-p { margin-top: 20px; }
.dc-mp-bio.is-collapsed .dc-mp-bio-p--extra { display: none; }
.dc-mp-bio-toggle { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; padding: 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; color: var(--wp--preset--color--primary); transition: color .2s ease; }
.dc-mp-bio-toggle:hover { color: var(--wp--preset--color--accent); }
.dc-mp-bio-toggle-line { display: block; width: 32px; height: 1px; background: var(--wp--preset--color--accent); }

/* Listas con filete y punto dorado (`BrandList`). */
.dc-mp-list { margin: 0; padding-left: 24px; list-style: none; border-left: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); }
@media (min-width: 768px) { .dc-mp-list { padding-left: 28px; } }
.dc-mp-list-item { position: relative; font-size: 0.9375rem; font-weight: 300; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); }
@media (min-width: 768px) { .dc-mp-list-item { font-size: 1rem; } }
.dc-mp-list-item + .dc-mp-list-item { margin-top: 20px; }
.dc-mp-list--spacious .dc-mp-list-item + .dc-mp-list-item { margin-top: 28px; }
/* El anillo de 4px en color de fondo es lo que tapa el filete bajo el punto. */
.dc-mp-dot { position: absolute; left: -29px; top: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--accent); box-shadow: 0 0 0 4px var(--wp--preset--color--base); }

.dc-mp-vision { margin: 0; padding-left: 24px; border-left: 4px solid var(--wp--preset--color--accent); font-size: 1.125rem; font-weight: 300; font-style: italic; line-height: 1.625; color: var(--wp--preset--color--primary); }
@media (min-width: 768px) { .dc-mp-vision { padding-left: 32px; font-size: 1.25rem; } }

/* ===== Single Área (fiel a servicios.$area.tsx) ===== */

/* --- Banner (PageHeader con backgroundImage + description) ---
   mx-auto grid max-w-6xl grid-cols-1 items-end gap-6 px-6 md:grid-cols-2 md:gap-12
   El max-width incluye el padding (border-box), igual que en el preflight de Tailwind:
   1152 - 24 - 24 = 1104px útiles. Lo comparte el banner del single de Insights. */
.dc-abanner { text-align: left; }
.dc-abanner-grid { box-sizing: border-box; display: grid; grid-template-columns: 1fr; gap: 24px; align-items: end; max-width: 1152px; padding-left: 24px; padding-right: 24px; }
@media (min-width: 768px) { .dc-abanner-grid { grid-template-columns: 1fr 1fr; gap: 48px; } }
.dc-abanner-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 12px; } /* text-xs tracking-[0.35em] text-white/70 mb-3 */
.dc-abanner-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.01em; color: #fff; margin: 0; filter: drop-shadow(0 3px 3px rgb(0 0 0 / 0.12)); } /* text-4xl drop-shadow-md */
@media (min-width: 768px) { .dc-abanner-title { font-size: 3.75rem; line-height: 1; } } /* md:text-6xl */
.dc-abanner-r p { color: rgba(255,255,255,0.85); font-size: 1rem; line-height: 1.625; margin: 0; } /* text-base leading-relaxed text-white/85 */
@media (min-width: 768px) { .dc-abanner-r { text-align: right; padding-bottom: 12px; } .dc-abanner-r p { margin-left: auto; max-width: 28rem; font-size: 1.125rem; } } /* md:pb-3 md:text-right max-w-md md:text-lg */

/* --- Cuerpo: 2 columnas (md:grid-cols-[1.5fr_1fr] gap-16 py-20 md:py-24) --- */
.dc-area-body { background: var(--wp--preset--color--base); padding: 80px 0; }
@media (min-width: 768px) { .dc-area-body { padding: 96px 0; } }
.dc-area-cols { display: grid; gap: 40px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .dc-area-cols { grid-template-columns: 1.5fr 1fr; gap: 64px; align-items: start; } }

/* --- Encabezado de la columna principal (eyebrow + h2 + rayita dorada) --- */
.dc-area-head { margin-bottom: 40px; } /* mb-10 */
.dc-area-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 12px; }
.dc-area-h2 { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); margin: 0; } /* text-3xl leading-tight */
@media (min-width: 768px) { .dc-area-h2 { font-size: 2.25rem; } } /* md:text-4xl */
.dc-area-rule { display: block; margin-top: 20px; width: 64px; height: 2px; background: var(--wp--preset--color--accent); } /* mt-5 h-[2px] w-16 bg-gold */
.dc-area-lead { font-family: var(--wp--preset--font-family--heading); font-weight: 300; font-size: 1.125rem; line-height: 1.625; letter-spacing: 0.025em; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); margin: 0; } /* text-lg font-light leading-relaxed tracking-wide */
@media (min-width: 768px) { .dc-area-lead { font-size: 1.25rem; } } /* md:text-xl */

/* --- Bloques de servicio (repeater `bullets`) --- */
/* Texto corrido del área (campo `cuerpo`). Hereda el tamaño y el color de la
   entradilla para que se lea como una continuación, pero sin su `tracking` ni
   su peso ligero, que son de titular. Nada de numeración ni viñetas: eso es
   del repeater `bullets`, que vive aparte. */
.dc-area-texto { margin-top: 32px; }
.dc-area-texto p { font-size: 1rem; line-height: 1.75; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); margin: 0; }
@media (min-width: 768px) { .dc-area-texto p { font-size: 1.0625rem; } }
.dc-area-texto p + p { margin-top: 20px; }
.dc-area-texto strong { font-weight: 600; color: var(--wp--preset--color--primary); }
.dc-area-texto a { color: var(--wp--preset--color--primary); text-decoration: underline; text-underline-offset: 3px; }
.dc-area-texto a:hover { color: var(--wp--preset--color--accent-hover); }
/* Subtítulos dentro del cuerpo. Hacen falta desde que Recursos Naturales reúne
   cinco subsectores (F4.35); antes el campo solo llevaba párrafos. Se usa el
   mismo tamaño y versalitas que el título de un bloque de servicio, para que
   las dos maneras de estructurar un área se lean igual. */
.dc-area-texto h2, .dc-area-texto h3, .dc-area-texto h4 {
	font-family: var(--wp--preset--font-family--heading); font-weight: 700;
	font-size: 0.875rem; line-height: 1.4; letter-spacing: 0.2em; text-transform: uppercase;
	color: var(--wp--preset--color--primary); margin: 40px 0 0;
}
@media (min-width: 768px) { .dc-area-texto h2, .dc-area-texto h3, .dc-area-texto h4 { font-size: 1rem; } }
/* El primero no separa: ya lo hace el margen del contenedor. */
.dc-area-texto > :first-child { margin-top: 0; }
/* Y el párrafo que sigue a un subtítulo va más pegado que entre párrafos. */
.dc-area-texto h2 + p, .dc-area-texto h3 + p, .dc-area-texto h4 + p { margin-top: 12px; }
/* Filete dorado bajo cada subtítulo, como en el encabezado del área. */
.dc-area-texto h3::after { content: ""; display: block; width: 64px; height: 2px; margin-top: 12px; background: var(--wp--preset--color--accent); }

.dc-serviceblocks { margin-top: 56px; display: flex; flex-direction: column; gap: 40px; } /* mt-14 gap-10 */
.dc-serviceblock { border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); padding-bottom: 32px; transition: border-color 0.5s var(--wp--custom--ease); }
.dc-serviceblock:hover { border-bottom-color: var(--wp--preset--color--accent); }
.dc-serviceblock-head { display: flex; align-items: baseline; gap: 24px; } /* gap-6 items-baseline */
.dc-serviceblock-num { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 3rem; line-height: 1; color: color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); transition: color 0.3s var(--wp--custom--ease); } /* text-5xl text-brand/15 */
@media (min-width: 768px) { .dc-serviceblock-num { font-size: 3.75rem; } } /* md:text-6xl */
.dc-serviceblock:hover .dc-serviceblock-num { color: color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent); } /* group-hover:text-gold/50 */
.dc-serviceblock-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--wp--preset--color--primary); margin: 0; } /* text-sm uppercase tracking-[0.2em] */
@media (min-width: 768px) { .dc-serviceblock-title { font-size: 1rem; } } /* md:text-base */
.dc-serviceblock-body { margin: 16px 0 0; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); } /* mt-4 text-sm text-brand/70 */
.dc-serviceblock-list { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } /* mt-6 space-y-3 pl-0 */
@media (min-width: 768px) { .dc-serviceblock-list { padding-left: 96px; } } /* md:pl-24 */
.dc-serviceblock-list li { display: flex; gap: 12px; font-size: 0.95rem; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); } /* flex gap-3 leading-relaxed text-brand/80 */
.dc-serviceblock-dot { flex: none; margin-top: 8px; width: 12px; height: 6px; border-radius: 999px; background: var(--wp--preset--color--accent); } /* mt-2 h-[6px] w-3 shrink-0 rounded-full bg-gold */

/* --- Aside de expertos (sticky top-28, border-t-2 gold, bg-brand-ice/70, p-8) --- */
.dc-experts-box { position: sticky; top: 112px; border-top: 2px solid var(--wp--preset--color--accent); background: color-mix(in oklab, var(--wp--preset--color--surface-elevated) 70%, #fff); border-radius: 4px; padding: 32px; }
.dc-experts-eyebrow { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.35em; text-transform: uppercase; color: var(--wp--preset--color--accent); margin: 0 0 8px; }
.dc-experts-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); margin: 0 0 32px; } /* text-2xl mb-8 */
.dc-experts-list { display: flex; flex-direction: column; gap: 24px; }

/* ===== Página Buscador (Insights) — fiel a buscador.tsx ===== */
.dc-buscador { background: var(--wp--preset--color--base); padding: clamp(40px, 6vw, 56px) 0; }
.dc-buscador-wrap { max-width: 900px; margin: 0 auto; padding: 0 var(--wp--custom--gutter); }
.dc-buscador-bar { display: flex; align-items: center; gap: 12px; background: var(--wp--preset--color--surface-elevated); border-radius: 999px; padding: 12px 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); }
.dc-buscador-bar svg { color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); flex: none; }
.dc-buscador-bar input[type="search"] { flex: 1; min-width: 0; background: transparent; border: none; outline: none; color: var(--wp--preset--color--primary); font-size: 1rem; }
.dc-buscador-bar input[type="search"]::placeholder { color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-buscador-bar button { flex: none; border: none; cursor: pointer; border-radius: 999px; background: var(--wp--preset--color--primary); color: #fff; font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.75rem; padding: 8px 16px; }
.dc-buscador-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.dc-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); border-radius: 999px; padding: 5px 12px; font-size: 0.75rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); text-decoration: none; transition: background .2s, color .2s, border-color .2s; }
.dc-chip:hover, .dc-chip.is-active { background: var(--wp--preset--color--primary); color: #fff; border-color: transparent; }
.dc-chip-shape { width: 6px; height: 6px; flex: none; color: var(--wp--preset--color--accent); }
.dc-buscador-results { list-style: none; margin: 40px 0 0; padding: 0; }
.dc-result { padding: 24px 0; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); }
.dc-result:first-child { border-top: none; }
.dc-result-type { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); margin: 0; }
.dc-result-title { font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 700; margin: 4px 0 0; }
.dc-result-title a { color: var(--wp--preset--color--primary); text-decoration: none; }
.dc-result-title a:hover { color: var(--wp--preset--color--accent); }
.dc-result-excerpt { font-size: 0.875rem; line-height: 1.6; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin: 8px 0 0; }

@media (max-width: 700px) {
	.dc-areasd-head { flex-direction: column; align-items: flex-start; }
	.dc-areasd-aside { text-align: left; }
	.dc-carousel-prev { left: 0; }
	.dc-carousel-next { right: 0; }
}

/* ---------- Únete ---------- */
.dc-unete-carrera { background: var(--wp--preset--color--primary); color: #fff; }
.dc-unete-carrera-grid { display: grid; gap: 40px; padding-top: clamp(40px, 6vw, 56px); padding-bottom: clamp(40px, 6vw, 56px); }
.dc-unete-carrera-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; color: #fff; margin: 0; }
.dc-unete-carrera-txt p { color: rgba(255,255,255,0.85); margin: 0; font-size: 1rem; line-height: 1.6; }
.dc-unete-carrera-txt p.dc-unete-carrera-2 { margin-top: 12px; color: rgba(255,255,255,0.7); }
.dc-unete-carrera-txt strong { color: #fff; }
@media (min-width: 768px) { .dc-unete-carrera-grid { grid-template-columns: 280px 1fr; } }

.dc-unete { background: #fff; padding: clamp(48px, 8vw, 64px) 0; }
.dc-unete-card { position: relative; overflow: hidden; display: grid; gap: clamp(24px, 4vw, 40px); background: #fff; border-radius: 18px; padding: clamp(24px, 4vw, 40px); box-shadow: 0 20px 40px -18px rgba(14,44,112,0.28); box-shadow: 0 10px 30px -12px rgba(14,44,112,0.25); outline: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); }
.dc-unete-img { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0.06; pointer-events: none; }
.dc-unete-form { position: relative; z-index: 1; }
@media (min-width: 768px) { .dc-unete-card { grid-template-columns: 1fr 1fr; align-items: center; } .dc-unete-img { position: relative; opacity: 0.1; border-radius: 14px; min-height: 100%; } }
.dc-unete-form-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; color: var(--wp--preset--color--primary); margin: 0; }
.dc-unete-divider { height: 3px; width: 48px; background: var(--wp--preset--color--accent, #F2B221); border-radius: 999px; margin: 14px 0 22px; }
.dc-unete-msg { border-radius: 10px; padding: 12px 14px; font-size: 0.9rem; margin: 0 0 18px; }
.dc-unete-msg--ok { background: color-mix(in oklab, #16a34a 12%, #fff); color: #166534; }
.dc-unete-msg--err { background: color-mix(in oklab, #dc2626 12%, #fff); color: #991b1b; }
.dc-field { margin-bottom: 16px; }
.dc-field label { display: block; font-size: 0.75rem; font-weight: 600; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin-bottom: 6px; }
.dc-field .dc-req { color: var(--wp--preset--color--accent, #F2B221); }
.dc-field input, .dc-field textarea { width: 100%; box-sizing: border-box; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); border-radius: 8px; padding: 10px 12px; font: inherit; font-size: 0.9rem; color: var(--wp--preset--color--primary); background: #fff; }
.dc-field textarea { resize: vertical; }
.dc-field input:focus, .dc-field textarea:focus { outline: 2px solid color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent); outline-offset: 1px; border-color: transparent; }
.dc-file { display: flex; align-items: center; gap: 8px; position: relative; cursor: pointer; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); border-radius: 8px; padding: 10px 12px; font-size: 0.9rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); }
.dc-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dc-file .dc-file-name { flex: 1; }
.dc-file svg { flex-shrink: 0; }
.dc-unete-check { display: flex; align-items: flex-start; gap: 8px; font-size: 0.85rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 75%, transparent); margin: 4px 0 20px; }
.dc-unete-check input { margin-top: 2px; accent-color: var(--wp--preset--color--primary); }
.dc-unete-check a { color: var(--wp--preset--color--primary); text-decoration: underline; }
.dc-unete-btn { display: inline-flex; align-items: center; gap: 8px; border: 0; cursor: pointer; background: var(--wp--preset--color--accent, #F2B221); color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 0.9rem; padding: 12px 22px; border-radius: 999px; transition: filter 0.2s var(--wp--custom--ease, ease); }
.dc-unete-btn:hover { filter: brightness(0.95); }

/* ============================================================
   Botón global — traduce GoldButton.tsx (reutilizable en todo el sitio)
   base: inline-flex items-center justify-center gap-2 rounded-md px-5 py-2.5 text-sm font-semibold
   ============================================================ */
.dc-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; cursor: pointer; border-radius: 8px; padding: 10px 20px; font-family: inherit; font-size: 0.875rem; font-weight: 600; line-height: 1.25; text-decoration: none; transition: filter 0.2s, background-color 0.2s, border-color 0.2s; }
.dc-btn--solid { background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); } /* bg-gold text-gold-foreground shadow */
.dc-btn--solid:hover { filter: brightness(0.95); } /* hover:brightness-95 */
.dc-btn--outline { background: transparent; border: 1px solid rgba(255,255,255,0.6); color: #fff; } /* border border-white/60 text-white */
.dc-btn--outline:hover { background: rgba(255,255,255,0.1); } /* hover:bg-white/10 */

/* ============================================================
   Contacto — traducción literal de contacto.tsx (Tailwind → CSS)
   Tokens: brand = primary (#0E2C70) · gold = accent (#F2B221)
   ============================================================ */
/* Sección navy: intro del formulario (bg-brand text-white) */
.dc-ct-intro { background: var(--wp--preset--color--primary); color: #fff; }
.dc-ct-intro-grid { box-sizing: border-box; max-width: 1280px; margin: 0 auto; display: grid; gap: 24px; padding: 40px 24px; } /* max-w-7xl gap-6 px-6 py-10 (border-box: 1280 incluye el padding) */
.dc-ct-intro-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0; } /* font-display text-3xl font-bold */
.dc-ct-intro-p1 { color: rgba(255,255,255,0.85); margin: 0; } /* text-white/85 */
.dc-ct-intro-p2 { color: rgba(255,255,255,0.70); margin: 8px 0 0; } /* mt-2 text-white/70 */
.dc-ct-intro-p1 b { font-weight: 700; }
@media (min-width: 768px) { .dc-ct-intro-grid { grid-template-columns: 280px 1fr; } } /* md:grid-cols-[280px_1fr] */

/* Sección blanca: card imagen + formulario (bg-white py-16) */
.dc-ct-formsec { background: #fff; padding: 64px 0; }
/* max-w-6xl px-6 · Tailwind aplica border-box, así que 1152px INCLUYE el
   padding. Sin declararlo, un contenedor propio medía 1200px y otro envuelto
   en .wp-block-group (que sí trae border-box) medía 1152: la misma sección
   salía con dos anchos distintos según cómo estuviera montada. */
.dc-ct-formwrap { box-sizing: border-box; max-width: 1152px; margin: 0 auto; padding: 0 24px; }
/* `minmax(0, 1fr)` y no `1fr`: una columna `auto`/`1fr` nunca baja de su
   min-content, y el campo de archivo de JetFormBuilder mide 321px mínimos que
   no encogen. En Únete eso empujaba la columna a 346px dentro de una caja de
   294 y sacaba 39 elementos 4px fuera de la pantalla a 390px de ancho. */
.dc-ct-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; overflow: hidden; border-radius: 18px; background: #fff; padding: 24px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent), 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } /* gap-8 rounded-2xl p-6 shadow-lg ring-1 ring-brand/10 */
/* El propio campo tampoco debe pasarse de su columna. */
.dc-ct-form input[type="file"], .dc-ct-form .jet-form-builder-file-upload__fields { max-width: 100%; }
.dc-ct-photo { border-radius: 10px; overflow: hidden; max-height: 600px; } /* wrapper (evita <p> fantasma de wpautop entre img y form) */
.dc-ct-photo img { display: block; width: 100%; height: 100%; max-height: 600px; object-fit: cover; } /* h-full max-h-[600px] w-full rounded-lg object-cover */
/* La foto de la tarjeta es un bloque de imagen: Gutenberg mete un <figure>
   entre el contenedor y el <img>, así que el height:100% se medía contra el
   figure y la foto perdía su alto (misma trampa que .dc-enfoque-img, F4.9). */
.dc-ct-photo > figure { height: 100%; margin: 0; }
/* Las dos rejillas de Contacto son grupos de Gutenberg y su layout de flujo
   inyecta margin-block-start:24px a los hijos. Ambas ya separan con `gap`, y
   el diseño no declara ningún margen ahí, así que se neutraliza solo en ellas
   (nunca con un `> *` amplio: en la portada eso se comió un margen real). */
.dc-ct-card > *, .dc-ct-intro-grid > * { margin-block-start: 0; }
/* Únete: imagen tenue (opacity-10) + CV mockup (flex justify-between con Paperclip) */
.dc-un-photo { position: relative; height: 100%; max-height: 560px; min-height: 260px; overflow: hidden; border-radius: 10px; } /* relative h-full max-h-[560px] min-h-[260px] overflow-hidden rounded-lg */
.dc-un-photo img { display: block; height: 100%; width: 100%; object-fit: cover; opacity: 0.1; } /* h-full w-full object-cover opacity-10 */
/* Misma trampa que .dc-ct-photo: el bloque de imagen mete un <figure>. */
.dc-un-photo > figure { height: 100%; margin: 0; }
.dc-ct-file { position: relative; display: flex; align-items: center; justify-content: space-between; border-radius: 8px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); padding: 8px 12px; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); cursor: pointer; } /* flex items-center justify-between rounded-md border border-brand/15 px-3 py-2 text-sm text-brand/60 */
.dc-ct-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.dc-ct-file svg { flex-shrink: 0; }
.dc-ct-form .dc-btn { margin-top: 8px; align-self: flex-start; } /* mt-2 w-fit — no estirar al ancho del form (flex-col) */
.dc-ct-form { display: flex; flex-direction: column; gap: 16px; } /* flex flex-col gap-4 */
.dc-ct-form-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); margin: 0; } /* font-display text-2xl font-bold text-brand */
.dc-ct-form-sub { font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); margin: 0; } /* text-sm text-brand/70 */
.dc-ct-hr { height: 1px; background: color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); } /* h-px bg-brand/10 */
.dc-ct-fieldwrap { }
.dc-ct-label { margin-bottom: 4px; display: block; font-size: 0.75rem; font-weight: 500; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); } /* mb-1 block text-xs font-medium text-brand/70 */
.dc-ct-req { color: oklch(0.577 0.245 27.325); } /* text-destructive */
.dc-ct-input, .dc-ct-select { width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); padding: 8px 12px; font: inherit; font-size: 0.875rem; background: #fff; outline: none; } /* w-full rounded-md border border-brand/15 px-3 py-2 text-sm */
.dc-ct-select { color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); } /* text-brand/80 */
.dc-ct-textarea { resize: vertical; }
.dc-ct-input:focus, .dc-ct-select:focus { border-color: var(--wp--preset--color--primary); } /* focus:border-brand */
.dc-ct-check { display: flex; align-items: center; gap: 8px; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); } /* flex items-center gap-2 text-sm text-brand/80 */
.dc-ct-check input { width: 16px; height: 16px; accent-color: #059669; } /* h-4 w-4 accent-emerald-600 */
.dc-ct-check a { color: #2563eb; text-decoration: underline; } /* text-blue-600 underline */
.dc-ct-btn { margin-top: 8px; display: inline-flex; width: fit-content; align-items: center; gap: 8px; border: 0; cursor: pointer; border-radius: 8px; background: var(--wp--preset--color--accent); padding: 10px 20px; font-size: 0.875rem; font-weight: 600; color: oklch(0.22 0.05 265); box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1); transition: filter 0.15s ease; } /* mt-2 inline-flex w-fit rounded-md bg-gold px-5 py-2.5 text-sm font-semibold text-gold-foreground shadow */
.dc-ct-btn:hover { filter: brightness(0.95); } /* hover:brightness-95 */
.dc-ct-msg { border-radius: 8px; padding: 10px 12px; font-size: 0.875rem; margin: 0; }
.dc-ct-msg--ok { background: color-mix(in oklab, #16a34a 12%, #fff); color: #166534; }
.dc-ct-msg--err { background: color-mix(in oklab, #dc2626 12%, #fff); color: #991b1b; }

/* ===== JetFormBuilder dentro de la tarjeta =====================================
   El formulario lo pinta JetFormBuilder para que el cliente pueda añadir y
   quitar campos desde el admin. Los campos ya llevan las clases del diseño
   (`dc-ct-input`, `dc-ct-select`, `dc-btn`) puestas desde el propio formulario,
   así que aquí solo se viste lo que JFB envuelve distinto: la fila, la
   etiqueta, la casilla, el adjunto y los avisos.
   TODO va dentro de `.dc-ct-form` para no tocar ningún otro formulario. */

/* `.dc-ct-form` es ahora un grupo de Gutenberg: su layout de flujo inyecta
   margin-block-start a los hijos y esta columna ya separa con `gap`. */
.dc-ct-form > * { margin-block-start: 0; }
/* La rayita es un separador nativo: quitarle el borde y los márgenes de core. */
hr.dc-ct-hr { border: 0; margin: 0; opacity: 1; }

/* El <form> hereda la misma columna con gap que tenía el formulario propio. */
.dc-ct-form .jet-form-builder { display: flex; flex-direction: column; gap: 16px; }
.dc-ct-form .jet-form-builder-row { display: block; }

/* Etiqueta = .dc-ct-label */
.dc-ct-form .jet-form-builder__label { margin-bottom: 4px; }
.dc-ct-form .jet-form-builder__label-text { font-size: 0.75rem; font-weight: 500; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); }
.dc-ct-form .jet-form-builder__required { color: oklch(0.577 0.245 27.325); }
.dc-ct-form textarea.jet-form-builder__field { min-height: 96px; } /* las 4 filas del diseño */

/* Casilla de privacidad = .dc-ct-check */
.dc-ct-form .jet-form-builder__field-label.for-checkbox { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); cursor: pointer; }
.dc-ct-form .dc-jf-check { width: 16px; height: 16px; margin: 0; flex-shrink: 0; accent-color: #059669; }
.dc-ct-form .jet-form-builder__field-label.for-checkbox a { color: #2563eb; text-decoration: underline; }

/* Botón: ya trae .dc-btn .dc-btn--solid, solo falta que no se estire. */
.dc-ct-form .jet-form-builder__action-button-wrapper { display: flex; }
.dc-ct-form .dc-jf-submit { margin-top: 8px; align-self: flex-start; }

/* Adjuntar CV. JFB usa un input de archivo real con su zona de previsualización;
   se le da la caja de .dc-ct-file, pero el interior es suyo (ver la desviación
   declarada: no reproduce el "Selecciona un archivo" + clip del diseño). */
.dc-ct-form .jet-form-builder-file-upload__fields { border-radius: 8px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); padding: 8px 12px; }
.dc-ct-form .jet-form-builder-file-upload__input { width: 100%; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); }
.dc-ct-form .jet-form-builder-file-upload__message { margin-top: 4px; line-height: 1.3; }
.dc-ct-form .jet-form-builder-file-upload__message small { font-size: 0.75rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 55%, transparent); }
.dc-ct-form .jet-form-builder-file-upload__errors:not(.is-hidden) { font-size: 0.8125rem; color: #991b1b; }
/* JFB reserva 100px para la vista previa del archivo AUNQUE no haya ninguno:
   la fila medía 212px frente a los 73px de un campo de texto. Se colapsa
   mientras está vacía y vuelve a ocupar sitio sola al elegir archivo.
   El `min-height` es el que hace el trabajo; el `:has()` remata la caja
   inline-flex, y donde no esté soportado el campo ya queda compacto igual. */
.dc-ct-form .jet-form-builder-file-upload__content { min-height: 0; }
.dc-ct-form .jet-form-builder-file-upload__files:empty { display: none; }
.dc-ct-form .jet-form-builder-file-upload__content:not(:has(.jet-form-builder-file-upload__files > *)) { display: none; }
/* Y con archivo elegido, la miniatura de 100px se queda en 64: un CV es un PDF,
   no hay nada que previsualizar más allá del icono y la equis para quitarlo. */
.dc-ct-form .jet-form-builder-file-upload__file { width: 64px; height: 64px; }

/* Avisos de envío = .dc-ct-msg */
.dc-ct-form .jet-form-builder-messages-wrap:empty { display: none; }
.dc-ct-form .jet-form-builder-message { border-radius: 8px; padding: 10px 12px; font-size: 0.875rem; margin: 0; }
.dc-ct-form .jet-form-builder-message--success { background: color-mix(in oklab, #16a34a 12%, #fff); color: #166534; }
.dc-ct-form .jet-form-builder-message--error { background: color-mix(in oklab, #dc2626 12%, #fff); color: #991b1b; }
.dc-ct-form .jet-form-builder__field.has-error, .dc-ct-form .jet-form-builder__field[aria-invalid="true"] { border-color: #dc2626; }
.dc-ct-form .jet-form-builder__field-error { font-size: 0.75rem; color: #991b1b; margin-top: 4px; }
@media (min-width: 768px) { .dc-ct-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); padding: 40px; } } /* md:grid-cols-2 md:p-10 */

/* iOS Safari amplía la página al enfocar un campo con menos de 16px. Los campos
   están a 14px por diseño, así que se suben a 16px SOLO en móvil: el zoom
   automático descoloca el formulario entero y es peor que un texto un punto
   mayor. En escritorio se queda el tamaño del diseño. */
@media (max-width: 767px) {
	.dc-ct-form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
	.dc-ct-form select,
	.dc-ct-form textarea { font-size: 16px; }
}

/* Sección navy: detalles de contacto (bg-brand text-white) */
.dc-ct-detalles { background: var(--wp--preset--color--primary); color: #fff; }
.dc-ct-detalles-wrap { box-sizing: border-box; max-width: 1152px; margin: 0 auto; padding: 64px 24px; } /* max-w-6xl px-6 py-16 (border-box: 1152 incluye el padding) */
.dc-ct-detalles-title { text-align: center; font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1.2; letter-spacing: -0.01em; color: #fff; margin: 0; } /* text-center font-display text-3xl font-bold */
.dc-ct-detalles-grid { margin-top: 40px; display: grid; gap: 24px; } /* mt-10 grid gap-6 */
.dc-ct-inforows { display: flex; flex-direction: column; gap: 12px; } /* flex flex-col gap-3 */
.dc-ct-inforow { display: flex; align-items: center; gap: 12px; border-radius: 8px; background: rgba(255,255,255,0.05); padding: 12px 16px; font-size: 0.875rem; color: rgba(255,255,255,0.85); box-shadow: 0 0 0 1px rgba(255,255,255,0.1); } /* flex items-center gap-3 rounded-md bg-white/5 px-4 py-3 text-sm text-white/85 ring-1 ring-white/10 */
.dc-ct-inforow-ic { color: var(--wp--preset--color--accent); display: inline-flex; } /* text-gold */
.dc-ct-map { overflow: hidden; border-radius: 10px; box-shadow: 0 0 0 1px rgba(255,255,255,0.1); } /* overflow-hidden rounded-lg ring-1 ring-white/10 */
.dc-ct-map iframe { display: block; width: 100%; height: 256px; border: 0; } /* h-64 w-full */
@media (min-width: 768px) {
	.dc-ct-detalles-title { font-size: 2.25rem; } /* md:text-4xl */
	.dc-ct-detalles-grid { grid-template-columns: 1fr 1fr; } /* md:grid-cols-2 */
}

/* ============================================================
   Portada · Áreas de práctica e industrias — index.tsx › AreasLegales
   ============================================================ */
.dc-a5 { position: relative; overflow: hidden; background: var(--wp--preset--color--primary); color: #fff; } /* bg-brand text-white */
.dc-a5-glow { position: absolute; left: -160px; top: 33%; height: 520px; width: 520px; border-radius: 9999px; opacity: 0.2; filter: blur(64px); background: radial-gradient(closest-side, var(--wp--preset--color--accent) 0%, transparent 70%); pointer-events: none; } /* -left-40 top-1/3 h-[520px] w-[520px] opacity-20 blur-3xl */
.dc-a5-inner { position: relative; padding-top: 80px; padding-bottom: 80px; } /* py-20 */
.dc-a5-head { display: grid; gap: 40px; } /* gap-10 */
.dc-a5-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 20px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.35em; color: var(--wp--preset--color--accent); } /* text-[10px] uppercase tracking-[0.35em] text-gold */
.dc-a5-eyebrow span { display: block; height: 1px; width: 32px; background: var(--wp--preset--color--accent); } /* h-px w-8 bg-gold */
/* `color` explícito, no heredado: theme.json aplica `h1…h6 { color: contrast }`
   como regla de ELEMENTO, y eso gana al blanco que hereda de .dc-a5 — dejaba el
   título navy sobre fondo navy, es decir, invisible. Todo encabezado sobre fondo
   oscuro tiene que declarar su color. */
.dc-a5-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 2.25rem; line-height: 0.95; margin: 0; color: #fff; } /* font-display text-4xl font-bold leading-[0.95] text-white */
.dc-a5-title em, .dc-a5-title-em { font-style: italic; color: var(--wp--preset--color--accent); } /* italic text-gold */

/* Adornos como pseudo-elementos: en la portada estos textos son bloques
   editables y un <span> vacío dentro del párrafo lo borra el cliente sin querer. */
.dc-a5::before { content: ""; position: absolute; left: -160px; top: 33%; height: 520px; width: 520px; border-radius: 9999px; opacity: 0.2; filter: blur(64px); background: radial-gradient(closest-side, var(--wp--preset--color--accent) 0%, transparent 70%); pointer-events: none; }
.dc-a5-eyebrow::before { content: ""; display: block; height: 1px; width: 32px; flex: none; background: var(--wp--preset--color--accent); }
/* El botón "Ver todas las áreas" como bloque nativo de botón. */
.dc-a5-btn-wrap .wp-block-button__link { display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; }
.dc-a5-btn-wrap .wp-block-button__link:hover { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); }
.dc-a5-btn-wrap .wp-block-button__link::after { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
.dc-a5-lead { font-size: 1.125rem; line-height: 1.6; color: rgba(255,255,255,0.8); margin: 0; } /* text-lg text-white/80 */
.dc-a5-btn { margin-top: 24px; display: inline-flex; align-items: center; gap: 8px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: rgba(255,255,255,0.05); padding: 10px 20px; font-size: 14px; font-weight: 600; color: #fff; text-decoration: none; transition: border-color 0.2s, background-color 0.2s, color 0.2s; } /* rounded-md border-white/20 bg-white/5 px-5 py-2.5 */
.dc-a5-btn:hover { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); } /* hover:border-gold hover:bg-gold hover:text-gold-foreground */
.dc-a5-btn svg { flex-shrink: 0; }
.dc-a5-grid { margin-top: 48px; display: grid; gap: 16px; } /* mt-12 gap-4 */
.dc-a5-card { display: block; border-radius: 14px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.05); padding: 20px; text-decoration: none; transition: border-color 0.2s, background-color 0.2s; } /* rounded-xl border-white/10 bg-white/5 p-5 */
.dc-a5-card:hover { border-color: color-mix(in oklab, var(--wp--preset--color--accent) 50%, transparent); background: rgba(255,255,255,0.1); } /* hover:border-gold/50 hover:bg-white/10 */
.dc-a5-name { font-family: var(--wp--preset--font-family--heading); font-size: 1.125rem; font-weight: 600; color: #fff; margin: 0; transition: color 0.2s; } /* font-display text-lg font-semibold */
.dc-a5-card:hover .dc-a5-name { color: var(--wp--preset--color--accent); } /* group-hover:text-gold */
.dc-a5-short { margin: 8px 0 0; font-size: 14px; line-height: 1.375; color: rgba(255,255,255,0.6); } /* mt-2 text-sm leading-snug text-white/60 */
.dc-a5-explore { margin-top: 16px; display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: var(--wp--preset--color--accent); } /* mt-4 text-xs font-semibold text-gold */
.dc-a5-explore svg { transition: transform 0.2s; }
.dc-a5-card:hover .dc-a5-explore svg { transform: translateX(4px); } /* group-hover:translate-x-1 */
@media (min-width: 640px) { .dc-a5-grid { grid-template-columns: 1fr 1fr; } } /* sm:grid-cols-2 */
@media (min-width: 768px) {
	.dc-a5-inner { padding-top: 112px; padding-bottom: 112px; } /* md:py-28 */
	.dc-a5-head { grid-template-columns: repeat(12, 1fr); align-items: end; }
	.dc-a5-head-l { grid-column: span 7; } /* md:col-span-7 */
	.dc-a5-head-r { grid-column: span 5; text-align: right; } /* md:col-span-5 md:text-right */
	.dc-a5-lead { margin-left: auto; max-width: 28rem; } /* md:ml-auto md:max-w-md */
	.dc-a5-title { font-size: 3rem; } /* md:text-5xl */
}
@media (min-width: 1024px) { .dc-a5-grid { grid-template-columns: repeat(4, 1fr); } } /* lg:grid-cols-4 */

/* ============================================================
   Header — traducción literal de SiteHeader.tsx
   ============================================================ */
.wp-site-blocks > header { position: sticky; top: 0; z-index: 40; } /* sticky top-0 z-40 (en el <header> del template-part) */
.dc-hdr { background: var(--wp--preset--color--primary); color: #fff; } /* bg-brand text-white */
.dc-hdr .dc-wrap { max-width: 1280px; } /* max-w-7xl */

/* Barra utility */
.dc-hdr-utility { border-bottom: 1px solid rgba(255,255,255,0.1); } /* border-b border-white/10 */
/* 16px en vez de los 14 del zip: petición del cliente ("el correo y el número,
   dos puntos más"). Solo lo heredan el teléfono y el correo — el buscador, el
   botón de newsletter y el selector de idioma declaran su propio tamaño. */
.dc-hdr-utility-in { display: flex; align-items: center; gap: 16px; padding: 12px 24px; font-size: 16px; } /* zip: text-sm */
.dc-hdr-logo { margin-right: 16px; flex-shrink: 0; display: inline-flex; } /* mr-4 shrink-0 */
.dc-hdr-logo img { height: 48px; width: auto; display: block; } /* h-12 w-auto */
.dc-hdr-tel, .dc-hdr-mail { display: none; align-items: center; gap: 8px; color: rgba(255,255,255,0.8); text-decoration: none; } /* hidden items-center gap-2 text-white/80 */
.dc-hdr-tel:hover, .dc-hdr-mail:hover { color: #fff; }
.dc-hdr-tel svg, .dc-hdr-mail svg, .dc-hdr-search svg { flex-shrink: 0; }
.dc-hdr-search { margin-left: auto; display: none; max-width: 20rem; flex: 1; align-items: center; gap: 8px; border-radius: 9999px; background: rgba(255,255,255,0.95); padding: 6px 12px; color: var(--wp--preset--color--primary); } /* ml-auto max-w-xs flex-1 rounded-full bg-white/95 px-3 py-1.5 */
.dc-hdr-search input { width: 100%; background: transparent; border: 0; font-size: 14px; outline: none; color: inherit; }
.dc-hdr-search input::placeholder { color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-hdr-news { display: none; flex-shrink: 0; border-radius: 8px; background: var(--wp--preset--color--accent); padding: 8px 16px; font-size: 12px; font-weight: 600; color: oklch(0.22 0.05 265); box-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); text-decoration: none; } /* rounded-md bg-gold px-4 py-2 text-xs font-semibold shadow-sm */
.dc-hdr-news:hover { filter: brightness(0.95); }
/* Es un <a> real contra TranslatePress (ver inc/idiomas.php); text-decoration
   es lo único que hubo que añadir respecto al <button> muerto de antes. */
.dc-hdr-lang { display: none; flex-shrink: 0; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.2); background: transparent; padding: 6px 12px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.85); text-decoration: none; cursor: pointer; } /* rounded-md border border-white/20 px-3 py-1.5 text-xs */
.dc-hdr-lang:hover { border-color: var(--wp--preset--color--accent); color: #fff; }
/* Selector de idioma del menú móvil: el toggle de escritorio está oculto por
   debajo de md, igual que en el zip, así que aquí vive el cambio de idioma. */
.dc-hdr-m-lang { display: flex; align-items: center; gap: 8px; }
.dc-hdr-m-lang svg { flex: none; opacity: 0.7; }
.dc-hdr-burger { margin-left: auto; display: inline-flex; background: none; border: 0; color: #fff; cursor: pointer; padding: 0; } /* ml-auto md:hidden */

/* Nav principal */
.dc-hdr-nav { display: none; }
/* Menú a 16px (el zip usa `text-sm` = 14): petición del cliente. */
.dc-hdr-nav-in { position: relative; display: flex; align-items: center; justify-content: center; gap: 40px; padding: 12px 24px; font-size: 16px; } /* zip: justify-center gap-10 px-6 py-3 text-sm */
.dc-hdr-navlink, .dc-hdr-trigger { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; color: rgba(255,255,255,0.85); background: none; border: 0; font: inherit; font-size: 16px; cursor: pointer; text-decoration: none; transition: color 0.2s; }
.dc-hdr-navlink:hover, .dc-hdr-trigger:hover { color: #fff; }
.dc-hdr-underline { position: absolute; bottom: -2px; left: 0; height: 1px; width: 100%; background: var(--wp--preset--color--accent); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease-out; pointer-events: none; } /* -bottom-0.5 h-px bg-gold scale-x-0 group-hover:scale-x-100 */
.dc-hdr-navlink:hover .dc-hdr-underline, .dc-hdr-item:hover .dc-hdr-underline, .dc-hdr-item.is-open .dc-hdr-underline { transform: scaleX(1); }
.dc-hdr-chev { transition: transform 0.3s; }
.dc-hdr-item.is-open .dc-hdr-chev { transform: rotate(180deg); }
.dc-hdr-item { position: relative; }
.dc-hdr-item--mega { position: static; }

/* Dropdowns Equipo / Insights (w-64 centrado) */
.dc-hdr-dd { position: absolute; left: 50%; top: 100%; z-index: 50; margin-top: 8px; transform: translateX(-50%); width: 16rem; border-radius: 10px; background: #fff; padding: 8px; color: var(--wp--preset--color--primary); box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1); opacity: 0; pointer-events: none; transition: opacity 0.2s; } /* mt-2 w-64 rounded-lg bg-white p-2 shadow-xl */
.dc-hdr-item.is-open .dc-hdr-dd { opacity: 1; pointer-events: auto; }
.dc-hdr-dd-item { display: block; border-radius: 4px; padding: 8px 12px; font-size: 14px; color: inherit; text-decoration: none; } /* rounded px-3 py-2 text-sm */
.dc-hdr-dd-item:hover { background: oklch(0.955 0.02 260); } /* hover:bg-brand-ice */
/* Panel de Insights del zip nuevo: w-72 p-3, con buscador arriba. */
.dc-hdr-dd--ins { width: 18rem; padding: 12px; }
.dc-hdr-dd-search { display: flex; align-items: center; gap: 8px; border-radius: 9999px; background: var(--wp--preset--color--surface-elevated); padding: 8px 12px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); } /* px-3 py-2 ring-1 ring-brand/10 */
.dc-hdr-dd-search svg { flex: none; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); }
.dc-hdr-dd-search input { width: 100%; min-width: 0; background: transparent; border: 0; outline: none; font-family: inherit; font-size: 14px; color: inherit; }
.dc-hdr-dd-search input::placeholder { color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-hdr-dd-links { margin-top: 8px; } /* mt-2 */

/* Mega-menú Servicios (full-width) */
.dc-hdr-mega { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.2s; } /* absolute left-0 right-0 top-full */
.dc-hdr-item.is-open .dc-hdr-mega { opacity: 1; pointer-events: auto; }
.dc-hdr-mega-inner { border-top: 1px solid rgba(0,0,0,0.05); background: #fff; color: var(--wp--preset--color--primary); box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); } /* border-t border-black/5 bg-white shadow-2xl */
/* El mega mide ~707px con las 23 áreas y las 24 industrias, así que en una
   pantalla baja (un portátil de 1024x640) se salía 195px y 8 enlaces quedaban
   fuera de alcance: al estar en `position: absolute` flota sobre la página, no
   la empuja, y al apartar el ratón se cierra. Se le da su propio scroll,
   limitado a lo que queda de pantalla bajo el header (lo mide theme.js).
   `overscroll-behavior: contain` evita que al llegar al final el scroll se
   contagie a la página de detrás. */
.dc-hdr-mega-inner { box-sizing: border-box; max-height: calc(100dvh - var(--dc-hdr-alto, 128px)); overflow-y: auto; overscroll-behavior: contain; }
.dc-hdr-mega-grid { max-width: 1280px; margin: 0 auto; display: grid; gap: 40px; padding: 40px 32px; grid-template-columns: minmax(0,1fr) minmax(0,1fr); } /* max-w-7xl gap-10 px-8 py-10 md:grid-cols-2 */
.dc-hdr-mega-title { margin: 0 0 16px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--wp--preset--color--primary); font-family: var(--wp--preset--font-family--heading); } /* mb-4 text-lg font-semibold */
.dc-hdr-mega-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; row-gap: 8px; } /* grid grid-cols-2 gap-x-6 gap-y-2 */
.dc-hdr-mega-link { display: inline-flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 14px; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); text-decoration: none; transition: color 0.2s; } /* inline-flex items-center gap-2 py-1 text-sm text-brand/80 */
.dc-hdr-mega-link:hover { color: var(--wp--preset--color--primary); }
.dc-hdr-mega-tick { height: 1px; width: 0; background: var(--wp--preset--color--accent); transition: width 0.3s; } /* h-px w-0 bg-gold group-hover:w-4 */
.dc-hdr-mega-link:hover .dc-hdr-mega-tick { width: 16px; }

/* Menú móvil */
.dc-hdr-mobile { display: none; border-top: 1px solid rgba(255,255,255,0.1); }
/* ⚠️ El panel vive DENTRO del header, que es `position: sticky; top: 0`.
   Al desplegar "Servicios" crece a ~2000px —más que cualquier pantalla— y,
   como el header va pegado arriba, el panel NO sube al hacer scroll: la página
   se mueve por detrás y el menú se queda clavado. Medido a 390x844 con solo
   Servicios abierto: **34 de 54 enlaces fuera de alcance**.
   Solución: el panel tiene su propia zona de scroll, acotada a lo que queda de
   pantalla por debajo de la barra del logo. `100dvh` (no `vh`) para que cuente
   la barra del navegador móvil, que aparece y desaparece.
   El valor exacto lo pone theme.js; el `calc` es el respaldo sin JavaScript. */
.dc-hdr-mobile.is-open {
	display: block;
	/* El tema no trae reset global: sin esto el `max-height` mide solo el
	   contenido y el `border-top` de 1px se suma por fuera. Misma trampa que en
	   F4.11, F4.17 y F4.23. */
	box-sizing: border-box;
	max-height: calc(100dvh - var(--dc-hdr-barra, 73px));
	overflow-y: auto;
	overscroll-behavior: contain; /* que el scroll no se contagie a la página */
	-webkit-overflow-scrolling: touch;
}
.dc-hdr-mobile-in { display: flex; flex-direction: column; padding: 12px 24px; font-size: 14px; }
.dc-hdr-m-link { padding: 8px 0; color: #fff; text-decoration: none; } /* py-2 */
.dc-hdr-m-label { margin: 8px 0 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); } /* text-[11px] uppercase tracking-widest text-white/50 */
.dc-hdr-m-sub { padding: 6px 0; color: rgba(255,255,255,0.8); text-decoration: none; } /* py-1.5 text-white/80 */
/* Submenús colapsables del menú móvil */
.dc-hdr-m-acc { display: block; }
.dc-hdr-m-sum { display: flex; align-items: center; justify-content: space-between; padding: 8px 0; color: #fff; font-size: 14px; cursor: pointer; list-style: none; }
.dc-hdr-m-sum::-webkit-details-marker { display: none; }
.dc-hdr-m-chev { color: rgba(255,255,255,0.6); transition: transform 0.3s; flex-shrink: 0; }
.dc-hdr-m-acc[open] .dc-hdr-m-chev { transform: rotate(180deg); }
.dc-hdr-m-panel { display: flex; flex-direction: column; padding: 2px 0 10px 12px; margin-left: 2px; border-left: 1px solid rgba(255,255,255,0.12); }
.dc-hdr-m-sublabel { margin: 8px 0 2px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.5); }
.dc-hdr-m-sub--all { color: var(--wp--preset--color--accent); font-weight: 600; }

@media (min-width: 768px) { /* md: */
	.dc-hdr-tel, .dc-hdr-news, .dc-hdr-lang { display: inline-flex; }
	.dc-hdr-search { display: flex; }
	.dc-hdr-burger { display: none; }
	.dc-hdr-nav { display: block; }
	.dc-hdr-mobile { display: none !important; }
}
@media (min-width: 1024px) { .dc-hdr-mail { display: inline-flex; } } /* lg: email */

/* ==========================================================================
   Insights — listado y single. Traducción literal de
   src/routes/insights.index.tsx y src/routes/insights.$slug.tsx del zip
   "Pixel Perfect Replica". Escala Tailwind: n × 4px.
   ========================================================================== */

/* ---------- Listado: sección contenedora ---------- */
/* section.bg-background > div.mx-auto.max-w-7xl.px-6.py-16.md:py-24 */
.dc-ins { background: var(--wp--preset--color--base); padding: 64px 0; }
@media (min-width: 768px) { .dc-ins { padding: 96px 0; } }

/* ---------- Buscador ---------- */
/* form.flex.items-center.gap-3.rounded-full.bg-white.px-4.py-2\.5.ring-1.ring-brand/10 */
.dc-ins-search { display: flex; align-items: center; gap: 12px; border-radius: 9999px; background: #fff; padding: 10px 16px; box-shadow: 0 0 0 1px color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); }
.dc-ins-search > svg { flex: none; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); } /* text-brand/60 */
.dc-ins-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; font-family: inherit; font-size: 0.875rem; color: var(--wp--preset--color--primary); } /* text-sm text-brand */
.dc-ins-search input::placeholder { color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-ins-search button { flex: none; border: 0; cursor: pointer; border-radius: 9999px; background: var(--wp--preset--color--primary); color: #fff; padding: 6px 16px; font-family: inherit; font-size: 0.75rem; font-weight: 600; transition: background-color 0.2s; } /* px-4 py-1.5 text-xs font-semibold */
.dc-ins-search button:hover { background: color-mix(in oklab, var(--wp--preset--color--primary) 90%, transparent); }

/* ---------- Chips de filtro ---------- */
/* div.mt-4.flex.flex-wrap.items-center.gap-2\.5 */
.dc-ins-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 16px; }
/* a.inline-flex.items-center.gap-2.rounded-full.border.px-4.py-2.text-sm */
.dc-ins-filtro { display: inline-flex; align-items: center; gap: 8px; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 15%, transparent); background: #fff; padding: 8px 16px; font-size: 0.875rem; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); text-decoration: none; transition: color 0.2s, background-color 0.2s, border-color 0.2s; }
.dc-ins-filtro:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--primary); } /* hover:border-gold hover:text-brand */
.dc-ins-filtro.is-active { border-color: var(--wp--preset--color--primary); background: var(--wp--preset--color--primary); color: #fff; }
/* BrandShape variant="dome-top" h-2 w-2 */
.dc-ins-filtro-shape { width: 8px; height: 8px; flex: none; color: color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent); }
.dc-ins-filtro.is-active .dc-ins-filtro-shape { color: var(--wp--preset--color--accent); }

/* ---------- Artículo destacado ---------- */
/* a.group.mt-12.grid.gap-8.border-y.border-brand/10.py-10.md:grid-cols-12.md:items-center */
.dc-ins-destacado { display: grid; gap: 32px; margin-top: 48px; padding: 40px 0; border-top: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); border-bottom: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); text-decoration: none; color: inherit; }
@media (min-width: 768px) {
	.dc-ins-destacado { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: center; }
	.dc-ins-destacado-media { grid-column: span 5; }
	.dc-ins-destacado-body { grid-column: span 7; }
}
.dc-ins-destacado-media, .dc-ins-destacado-body, .dc-ins-card-media { display: block; }
.dc-ins-destacado-media > span { display: block; overflow: hidden; border-radius: 16px; } /* rounded-2xl */
.dc-ins-destacado-media img { display: block; width: 100%; height: 224px; object-fit: cover; transition: transform 0.7s; } /* h-56 */
@media (min-width: 768px) { .dc-ins-destacado-media img { height: 288px; } } /* md:h-72 */
.dc-ins-destacado:hover .dc-ins-destacado-media img { transform: scale(1.05); }
/* p.mb-4.inline-flex.items-center.gap-2.text-[10px].tracking-[0.35em].text-brand/60 — la
   rayita dorada (span.h-px.w-8.bg-gold) va como ::before para no ensuciar el marcado. */
.dc-ins-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.35em; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); }
.dc-ins-meta::before { content: ""; display: block; flex: none; width: 32px; height: 1px; background: var(--wp--preset--color--accent); }
.dc-ins-meta em { font-style: normal; color: color-mix(in oklab, var(--wp--preset--color--primary) 40%, transparent); }
/* h2.font-display.text-3xl.leading-[1.05].md:text-5xl + group-hover:translate-x-2 */
.dc-ins-destacado-title { font-family: var(--wp--preset--font-family--heading); font-weight: 700; font-size: 1.875rem; line-height: 1.05; color: var(--wp--preset--color--primary); margin: 0; transition: transform 0.5s; }
@media (min-width: 768px) { .dc-ins-destacado-title { font-size: 3rem; } }
.dc-ins-destacado:hover .dc-ins-destacado-title { transform: translateX(8px); }
.dc-ins-destacado-excerpt { margin: 20px 0 0; font-size: 1.125rem; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); } /* mt-5 text-lg */
/* span.mt-6.inline-flex.items-center.gap-2.text-sm.font-semibold.text-brand */
.dc-ins-cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 0.875rem; font-weight: 600; color: var(--wp--preset--color--primary); }
.dc-ins-cta span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 9999px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 20%, transparent); color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); transition: border-color 0.3s, background-color 0.3s, color 0.3s; } /* h-9 w-9 */
.dc-ins-destacado:hover .dc-ins-cta span { border-color: var(--wp--preset--color--accent); background: var(--wp--preset--color--accent); color: oklch(0.22 0.05 265); } /* gold-foreground */
.dc-ins-cta svg { transition: transform 0.3s; }
.dc-ins-destacado:hover .dc-ins-cta svg { transform: rotate(-45deg); }

/* ---------- Rejilla de tarjetas ---------- */
/* ul.mt-10.grid.gap-8.md:grid-cols-3 */
.dc-ins-grid { list-style: none; display: grid; gap: 32px; margin: 40px 0 0; padding: 0; }
@media (min-width: 768px) { .dc-ins-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a.group.flex.h-full.flex-col.rounded-2xl.border.border-brand/10.bg-white.p-7 */
.dc-ins-card { display: flex; height: 100%; flex-direction: column; border-radius: 16px; border: 1px solid color-mix(in oklab, var(--wp--preset--color--primary) 10%, transparent); background: #fff; padding: 28px; text-decoration: none; color: inherit; transition: transform 0.3s, border-color 0.3s, box-shadow 0.3s; }
.dc-ins-card:hover { transform: translateY(-4px); border-color: color-mix(in oklab, var(--wp--preset--color--accent) 60%, transparent); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1); } /* hover:-translate-y-1 hover:shadow-lg */
/* div.-mx-7.-mt-7.mb-6.overflow-hidden.rounded-t-2xl */
.dc-ins-card-media { margin: -28px -28px 24px; overflow: hidden; border-radius: 16px 16px 0 0; }
.dc-ins-card-media img { display: block; width: 100%; height: 176px; object-fit: cover; transition: transform 0.7s; } /* h-44 */
.dc-ins-card:hover .dc-ins-card-media img { transform: scale(1.05); }
.dc-ins-card-meta { margin: 0; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3em; color: color-mix(in oklab, var(--wp--preset--color--primary) 50%, transparent); }
.dc-ins-card-title { font-family: var(--wp--preset--font-family--heading); font-weight: 600; font-size: 1.25rem; line-height: 1.375; color: var(--wp--preset--color--primary); margin: 16px 0 0; } /* mt-4 text-xl leading-snug */
.dc-ins-card-excerpt { flex: 1; margin: 12px 0 0; font-size: 0.875rem; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 65%, transparent); }
/* span.mt-6.inline-flex.gap-2.text-xs.uppercase.tracking-widest.text-brand/70 */
.dc-ins-card-more { display: inline-flex; align-items: center; gap: 8px; margin-top: 24px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); transition: color 0.2s; }
.dc-ins-card:hover .dc-ins-card-more { color: var(--wp--preset--color--primary); }
.dc-ins-vacio { margin-top: 48px; color: color-mix(in oklab, var(--wp--preset--color--primary) 60%, transparent); }

/* ---------- Single: cuerpo del artículo ---------- */
/* article.bg-background > div.mx-auto.max-w-3xl.px-6.py-16.md:py-24 */
.dc-ins-article { background: var(--wp--preset--color--base); padding: 64px 0; }
@media (min-width: 768px) { .dc-ins-article { padding: 96px 0; } }
.dc-wrap--narrow { max-width: 768px; } /* max-w-3xl */
/* img.mb-10.h-64.w-full.rounded-2xl.object-cover.md:h-96 */
.dc-ins-article .wp-block-post-featured-image { margin: 0 0 40px; }
.dc-ins-article .wp-block-post-featured-image img { display: block; width: 100%; height: 256px; object-fit: cover; border-radius: 16px; }
@media (min-width: 768px) { .dc-ins-article .wp-block-post-featured-image img { height: 384px; } }
/* p.font-sans.text-xl.font-light.italic.leading-relaxed.text-brand/80.md:text-2xl */
/* core/post-excerpt envuelve el texto en un <p> propio: el estilo va a los dos. */
.dc-ins-lead, .dc-ins-lead p { font-family: var(--wp--preset--font-family--body); font-weight: 300; font-style: italic; font-size: 1.25rem; line-height: 1.625; color: color-mix(in oklab, var(--wp--preset--color--primary) 80%, transparent); margin: 0; }
@media (min-width: 768px) { .dc-ins-lead, .dc-ins-lead p { font-size: 1.5rem; } }
/* div.mt-10.space-y-6.text-base.leading-[1.8].text-brand/75.md:text-lg */
.dc-ins-body { margin-top: 40px; font-size: 1rem; line-height: 1.8; color: color-mix(in oklab, var(--wp--preset--color--primary) 75%, transparent); }
@media (min-width: 768px) { .dc-ins-body { font-size: 1.125rem; } }
.dc-ins-body > * { margin-top: 0; margin-bottom: 0; }
.dc-ins-body > * + * { margin-top: 24px; } /* space-y-6 */
/* a.mt-14.inline-flex.items-center.gap-2.text-sm.font-semibold.text-brand/70 */
.dc-ins-back { margin: 56px 0 0; }
.dc-ins-back a { display: inline-flex; align-items: center; gap: 8px; font-size: 0.875rem; font-weight: 600; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); text-decoration: none; transition: color 0.2s; }
.dc-ins-back a:hover { color: var(--wp--preset--color--primary); }
/* La flecha (lucide ArrowLeft) va como máscara CSS: el enlace sigue siendo un
   párrafo normal en Gutenberg y el cliente no puede borrar el icono sin querer. */
.dc-ins-back a::before { content: ""; width: 14px; height: 14px; flex: none; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 19-7-7 7-7'/%3E%3Cpath d='M19 12H5'/%3E%3C/svg%3E") center / contain no-repeat; }

/* ---------- Single: "También te puede interesar" ---------- */
/* section.bg-brand-ice.py-16.md:py-20 */
.dc-ins-rel { background: var(--wp--preset--color--surface-elevated); padding: 64px 0; }
@media (min-width: 768px) { .dc-ins-rel { padding: 80px 0; } }
.dc-ins-rel-eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 32px; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.35em; color: color-mix(in oklab, var(--wp--preset--color--primary) 70%, transparent); }
.dc-ins-rel-eyebrow::before { content: ""; display: block; flex: none; width: 32px; height: 1px; background: var(--wp--preset--color--accent); }
/* ul.grid.gap-6.md:grid-cols-3 — tarjetas con p-6 en vez de p-7 */
.dc-ins-rel .dc-ins-grid { gap: 24px; margin: 0; }
.dc-ins-rel .dc-ins-card { padding: 24px; }
.dc-ins-rel .dc-ins-card-media { margin: -24px -24px 20px; } /* -mx-6 -mt-6 mb-5 */
.dc-ins-rel .dc-ins-card-media img { height: 160px; } /* h-40 */
.dc-ins-rel .dc-ins-card-title { font-size: 1.125rem; margin-top: 12px; } /* text-lg mt-3 */
.dc-ins-rel .dc-ins-card-more { margin-top: 20px; } /* mt-5 */

/* Columna derecha del banner de entrada: fecha · lectura, y debajo el área.
   <span className="block text-white/70"> + <span className="mt-2 block text-white/85"> */
.dc-abanner-r p.dc-abanner-fecha { color: rgba(255,255,255,0.7); }
.dc-abanner-r p.dc-abanner-area { margin-top: 8px; }