/**
 * Compás Vital · Secciones de página (patrones)
 * ─────────────────────────────────────────────
 * Estilos de las secciones reutilizables (hero, beneficios, método, confianza,
 * accesos, destacados, captación) usadas por los patrones de themes/.../patterns/.
 *
 * Reutiliza los tokens --cv-* de style.css. Botones y títulos ya vienen estilados
 * por style.css + theme.json, así que aquí solo va lo específico de cada sección.
 * El acento clay queda reservado a los CTA (botones); eyebrows y enlaces en teal.
 *
 * v2.1 — Capa de movimiento y profundidad: scroll-reveal (.cv-reveal/.cv-stagger),
 * hover con elevación y curva premium (--cv-ease), bento en Beneficios.
 * Paleta cálida: la antigua "profundidad teal" fría (#E6EFF0) se sustituye por
 * superficies arena cálidas. Todo respeta prefers-reduced-motion.
 */

/* ── Estructura común ── */
.cv-section { padding-block: 96px; }
.cv-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--cv-gutter); }

/* Barra "Descargar en PDF" (parts/pdf-boton). La marca solo se ve al imprimir
   (print.css la muestra); en pantalla solo está el botón. */
.cv-pdf-bar { margin: 0 0 var(--wp--preset--spacing--4); }
.cv-print-only { display: none; }

/* Helpers de fondo (para componer secciones en patrones de página) */
.cv-bg-panel   { background: var(--cv-panel); }
.cv-bg-surface { background: var(--cv-surface); }
.cv-bg-primary { background: var(--cv-primary); color: #fff; }
.cv-bg-primary h1, .cv-bg-primary h2, .cv-bg-primary h3 { color: #fff; }
.cv-bg-primary p { color: rgba(255,255,255,.85); }

/* Tarjeta de archivo: ocupa toda la altura de la celda de la rejilla, así no
   queda hueco (fondo de página) bajo las tarjetas con menos texto. */
.cv-archive-card { height: 100%; }

/* Lead de página (intro bajo el título de la plantilla) */
.cv-page-lead { font-size: var(--wp--preset--font-size--lg); color: var(--cv-primary-hover); max-width: 60ch; }

/* Imagen editorial dentro de una página (intro a dos columnas) */
.cv-page-img img { box-shadow: var(--cv-shadow-lg); }

/* Lista «lo que no hacemos» — transparencia (la cruz es decorativa, en clay) */
.cv-nolist { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.cv-nolist li { position: relative; padding-left: 34px; color: var(--cv-ink); }
.cv-nolist li::before {
	content: "✕"; position: absolute; left: 0; top: -1px;
	width: 22px; height: 22px; border-radius: 50%;
	background: var(--cv-accent-soft); color: var(--cv-accent);
	font-size: .8rem; font-weight: 700;
	display: flex; align-items: center; justify-content: center;
}
@media (min-width: 700px) { .cv-nolist { grid-template-columns: 1fr 1fr; gap: 14px 32px; } }

.cv-eyebrow {
	font-size: .875rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--cv-primary-hover);
	margin: 0 0 16px;
}

.cv-sec-head { text-align: center; margin-bottom: 64px; }
.cv-sec-head .cv-eyebrow { margin-bottom: 8px; }
.cv-sec-head h2 { font-weight: 800; }
.cv-sec-intro { color: var(--cv-muted); max-width: 52ch; margin-inline: auto; }

.cv-link { color: var(--cv-primary-hover); font-weight: 600; }

/* ── Tarjetas + iconos ── */
.cv-card {
	height: 100%;
	background: #fff;
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-lg);
	padding: 32px 26px;
	transition: transform .4s var(--cv-ease), box-shadow .4s var(--cv-ease), border-color .4s var(--cv-ease);
}
.cv-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--cv-shadow-lg);
	border-color: color-mix(in srgb, var(--cv-primary) 22%, var(--cv-line));
}
.cv-card h3 { margin: 0 0 8px; }
.cv-card p  { color: var(--cv-muted); margin: 0; }

/* Iconos de tarjeta — decorativos, generados desde CSS (::before).
 * El icono ya NO es HTML en el patrón: se elige con un modificador de clase
 * (p. ej. .cv-card--fuerza) para que en el editor cada tarjeta sea solo texto
 * editable. El glifo va como background-image (no mask) para conservar el
 * recuadro tintado + el icono en un único pseudo-elemento. */
.cv-card[class*="cv-card--"]::before,
.cv-acard[class*="cv-acard--"]::before {
	content: "";
	display: block;
	flex: none;
	width: 52px;
	height: 52px;
	margin-bottom: 16px;
	border-radius: 14px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
}

/* Glifos teal (accesos / áreas del sitio) */
.cv-acard--activity::before { background-color: var(--cv-teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h4l3-7 4 14 3-7h2'/%3E%3C/svg%3E"); }
.cv-acard--lista::before    { background-color: var(--cv-teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5' width='16' height='14' rx='2'/%3E%3Cpath d='M8 9h8M8 13h5'/%3E%3C/svg%3E"); }
.cv-acard--corazon::before  { background-color: var(--cv-teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21c-5-3-8-7-8-11a4 4 0 018-1 4 4 0 018 1c0 4-3 8-8 11z'/%3E%3C/svg%3E"); }
.cv-acard--libro::before    { background-color: var(--cv-teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h11a2 2 0 012 2v14H7a2 2 0 01-2-2z'/%3E%3Cpath d='M9 8h6M9 12h6'/%3E%3C/svg%3E"); }

/* Glifos clay (acento) */
.cv-card--fuerza::before { background-color: var(--cv-accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8502B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12h12M6 8h12M6 16h8'/%3E%3C/svg%3E"); }
.cv-card--mail { max-width: 560px; margin-inline: auto; text-align: center; }
.cv-card--mail::before   { margin-inline: auto; background-color: var(--cv-accent-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8502B' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }

/* Glifo teal en tarjeta de beneficio (movilidad) */
.cv-card--mov::before { background-color: var(--cv-teal-100); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='6' r='2'/%3E%3Cpath d='M12 8v6m0 0l-4 4m4-4l4 4M8 11h8'/%3E%3C/svg%3E"); }

/* Glifos verdes (success: documentación / confianza) */
.cv-card--reloj::before  { background-color: var(--cv-success-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7355' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 3'/%3E%3C/svg%3E"); }
.cv-card--doc::before    { background-color: var(--cv-success-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7355' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 4h9l4 4v12H6z'/%3E%3Cpath d='M14 4v5h5'/%3E%3Cpath d='M9 13h7M9 16h5'/%3E%3C/svg%3E"); }
.cv-card--escudo::before { background-color: var(--cv-success-soft); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234F7355' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l8 4v5c0 4.5-3 7.5-8 9-5-1.5-8-4.5-8-9V7z'/%3E%3Cpath d='M9 11l2 2 4-4'/%3E%3C/svg%3E"); }

/* ── Beneficios (bento asimétrico) ── */
.cv-benefits .cv-bento {
	display: grid;
	gap: 24px;
	grid-template-columns: repeat(3, 1fr);
}
.cv-benefits .cv-bento > *:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.cv-benefits .cv-bento > *:first-child.cv-card { background: var(--cv-panel); display: flex; flex-direction: column; }
.cv-benefits .cv-bento > *:first-child h3 { font-size: var(--wp--preset--font-size--2xl); }
/* Imagen de muestra que llena el alto sobrante de la tarjeta grande (sustituible) */
.cv-benefits .cv-bento > *:first-child .cv-card__img { margin: 24px 0 0; flex: 1 1 auto; min-height: 220px; }
.cv-benefits .cv-bento > *:first-child .cv-card__img img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--cv-radius-md); display: block; }
@media (max-width: 781px) {
	.cv-benefits .cv-bento { grid-template-columns: 1fr; }
	.cv-benefits .cv-bento > *:first-child { grid-column: auto; grid-row: auto; }
}

/* ── Hero ── */
.cv-hero { position: relative; overflow: hidden; background: var(--cv-panel); }
.cv-hero::before {
	content: ""; position: absolute; right: -12%; top: -30%; width: 55%; height: 160%;
	background: radial-gradient(circle, color-mix(in srgb, var(--cv-accent) 9%, transparent), transparent 70%);
	pointer-events: none;
	animation: cv-float 14s ease-in-out infinite alternate;
}
@keyframes cv-float {
	from { transform: translate(0, 0) scale(1); }
	to   { transform: translate(-4%, 4%) scale(1.06); }
}
.cv-hero__title { margin: 0 0 16px; font-weight: 800; }
.cv-hero__sub { font-size: var(--wp--preset--font-size--lg); color: var(--cv-primary-hover); max-width: 34ch; margin: 0 0 24px; }
.cv-hero__media { position: relative; }
.cv-hero__photo { margin: 0; }
.cv-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cv-radius-lg); box-shadow: var(--cv-shadow-xl); }
.cv-hero__badge {
	position: absolute; top: 16px; left: 16px; margin: 0;
	background: var(--cv-background); color: var(--cv-success); font-size: .85rem; font-weight: 600;
	padding: .4rem .9rem; border-radius: var(--cv-radius-pill); box-shadow: var(--cv-shadow-md);
}

/* ── Método ── */
.cv-method { background: var(--cv-panel); }
.cv-method__lead { color: var(--cv-primary-hover); }
.cv-step {
	height: 100%; background: var(--cv-background); border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-lg); padding: 26px;
	transition: transform .4s var(--cv-ease), box-shadow .4s var(--cv-ease);
}
.cv-step:hover { transform: translateY(-4px); box-shadow: var(--cv-shadow-md); }
.cv-step__n { font-size: .85rem; font-weight: 700; color: var(--cv-accent); letter-spacing: .06em; }
.cv-step h3 { margin: .3rem 0; }
.cv-step p  { color: var(--cv-muted); margin: 0; }
/* Número fantasma grande detrás de cada paso (sofisticación, sin imágenes).
   Se autonumera con un contador: no hace falta tocar el marcado. */
.cv-method .cv-stagger, .cv-steps { counter-reset: cvstep; }
.cv-step { position: relative; overflow: hidden; counter-increment: cvstep; }
.cv-step::after {
	content: counter(cvstep);
	position: absolute; top: -0.18em; right: 0.08em;
	font-size: 6.5rem; font-weight: 800; line-height: 1;
	color: color-mix(in srgb, var(--cv-primary) 7%, transparent);
	pointer-events: none; z-index: 0;
}
.cv-step > * { position: relative; z-index: 1; }

/* ── Manifiesto (banda editorial oscura) ── */
.cv-manifesto { text-align: center; }
.cv-manifesto .cv-wrap { max-width: 900px; }
.cv-manifesto__eyebrow {
	margin: 0 0 16px; font-size: .85rem; font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; color: var(--cv-accent-soft);
}
.cv-manifesto__claim {
	margin: 0 auto; max-width: 26ch;
	font-size: clamp(1.75rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1.25; color: #fff;
}
.cv-manifesto__sig { margin: 24px 0 0; color: var(--cv-accent-soft); font-weight: 600; letter-spacing: .02em; }

/* ── Confianza (trust bar) ── */
.cv-trustbar {
	display: flex; flex-wrap: wrap; gap: 16px; align-items: center; justify-content: center;
	background: var(--cv-panel); border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-pill); padding: 16px 26px; color: var(--cv-primary-hover);
}
.cv-trustbar p { margin: 0; }
.cv-badge-ev { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--cv-success); }
.cv-badge-ev::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--cv-success); display: inline-block; }

/* ── Accesos ── */
.cv-access { background: var(--cv-panel); }
/* Tarjeta-enlace: ahora es un grupo de bloques nativos (icono CSS + título
 * con enlace + subtítulo + «Ver →»). Toda la tarjeta es clicable mediante el
 * enlace estirado del título (::after), así que el resto de textos no son
 * enlaces y quedan editables como párrafos normales. */
.cv-acard {
	position: relative;
	display: flex; flex-direction: column; gap: 6px; height: 100%;
	background: #fff; border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-lg); padding: 26px;
	transition: transform .4s var(--cv-ease), box-shadow .4s var(--cv-ease), border-color .4s var(--cv-ease);
}
.cv-acard:hover {
	transform: translateY(-4px);
	box-shadow: var(--cv-shadow-lg);
	border-color: color-mix(in srgb, var(--cv-accent) 35%, var(--cv-line));
}
.cv-acard h3 { margin: .2rem 0 0; }
.cv-acard h3 a { color: var(--cv-primary); text-decoration: none; }
.cv-acard h3 a::after { content: ""; position: absolute; inset: 0; }
.cv-acard p { color: var(--cv-muted); font-size: .95rem; margin: 0; }
.cv-acard .cv-go { margin-top: auto; color: var(--cv-primary-hover); font-weight: 700; font-size: .95rem; transition: transform .4s var(--cv-ease); }
.cv-acard:hover .cv-go { transform: translateX(4px); }

/* ── Destacados ── */
.cv-guia {
	display: flex; flex-direction: column; justify-content: flex-end; min-height: 340px;
	background: var(--cv-primary); color: #fff; border-radius: var(--cv-radius-lg);
	padding: 38px; position: relative; overflow: hidden; text-decoration: none;
	transition: transform .4s var(--cv-ease), box-shadow .4s var(--cv-ease);
}
.cv-guia:hover { transform: translateY(-4px); box-shadow: var(--cv-shadow-xl); }
.cv-guia::before {
	content: ""; position: absolute; inset: 0;
	background: radial-gradient(circle at 80% 10%, color-mix(in srgb, var(--cv-accent) 25%, transparent), transparent 55%);
}
.cv-guia p { margin: 0; }
.cv-guia .cv-tag { position: relative; font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cv-accent-soft); font-weight: 700; }
.cv-guia h3 { position: relative; color: #fff; margin: .6rem 0; max-width: 18ch; }
.cv-guia h3 a { color: #fff; text-decoration: none; }
.cv-guia h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.cv-guia .cv-byline { position: relative; color: rgba(255, 255, 255, .8); font-size: .9rem; margin-bottom: 16px; }
.cv-guia .cv-go { position: relative; color: #fff; font-weight: 600; transition: transform .4s var(--cv-ease); }
.cv-guia:hover .cv-go { transform: translateX(4px); }
.cv-scard {
	position: relative;
	display: flex; gap: 16px; align-items: center; background: #fff; border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-md); padding: 21px 22px;
	transition: transform .4s var(--cv-ease), box-shadow .4s var(--cv-ease);
}
.cv-scard:hover { transform: translateX(4px); box-shadow: var(--cv-shadow-md); }
.cv-kind { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: var(--cv-radius-pill); flex: none; margin: 0; }
.cv-kind--ficha  { background: var(--cv-accent-soft); color: var(--cv-accent); }
.cv-kind--rutina { background: var(--cv-teal-100); color: var(--cv-primary); }
.cv-scard__body { display: flex; flex-direction: column; gap: 2px; }
.cv-scard .cv-meta { margin: 0; font-weight: 600; color: var(--cv-primary); font-size: var(--wp--preset--font-size--base); }
.cv-scard .cv-meta a { color: inherit; text-decoration: none; }
.cv-scard .cv-meta a::after { content: ""; position: absolute; inset: 0; }
.cv-scard .cv-sub  { margin: 0; font-size: .9rem; color: var(--cv-muted); }
/* Miniatura en la tarjeta pequeña de destacados */
.cv-scard__thumb { flex: none; margin: 0; }
.cv-scard__thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: var(--cv-radius-md); display: block; }
.cv-scard__body .cv-kind { align-self: flex-start; }

/* Acceso con imagen (oculta el icono CSS y pone foto arriba) */
.cv-acard--photo::before { display: none; }
.cv-acard__img { margin: 0 0 14px; }
.cv-acard__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--cv-radius-md); display: block; }

/* ── Captación ── */
.cv-capture { background: var(--cv-primary); color: #fff; }
.cv-capture h2 { color: #fff; max-width: 16ch; margin: 0; }
.cv-capture p  { color: rgba(255, 255, 255, .82); margin: .6rem 0 0; }
.cv-form {
	background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
	border-radius: var(--cv-radius-lg); padding: 26px;
}
.cv-form label { display: block; color: var(--cv-accent-soft); font-weight: 600; font-size: .95rem; }
.cv-form .cv-field { display: flex; gap: .7rem; margin-top: .7rem; }
.cv-form input { flex: 1; min-height: 52px; border: none; border-radius: var(--cv-radius-sm); padding: 0 1rem; font: inherit; }
.cv-form .cv-fine { font-size: .85rem; color: rgba(255, 255, 255, .6); margin-top: 16px; }
@media (max-width: 600px) { .cv-form .cv-field { flex-direction: column; } }

/* ── Capa de movimiento: scroll-reveal ──────────────────────────────────────
 * El estado oculto solo se aplica con .cv-js (la añade functions.php por JS),
 * así que sin JavaScript el contenido se ve siempre (accesible). */
.cv-js .cv-reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--cv-ease), transform .7s var(--cv-ease); }
.cv-js .cv-reveal.cv-in { opacity: 1; transform: none; }
.cv-js .cv-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--cv-ease), transform .6s var(--cv-ease); }
.cv-js .cv-stagger.cv-in > * { opacity: 1; transform: none; }
.cv-js .cv-stagger.cv-in > *:nth-child(2) { transition-delay: .08s; }
.cv-js .cv-stagger.cv-in > *:nth-child(3) { transition-delay: .16s; }
.cv-js .cv-stagger.cv-in > *:nth-child(4) { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
	.cv-js .cv-reveal,
	.cv-js .cv-stagger > * { opacity: 1 !important; transform: none !important; }
}

/* ── Singles: firma (autor + fecha) ── */
.cv-postmeta { align-items: center; color: var(--cv-muted); font-size: .9rem; }
.cv-postmeta p { margin: 0; }
.cv-postmeta__aut { font-weight: 600; color: var(--cv-primary); }
.cv-postmeta__sep { color: var(--cv-muted); }
.cv-postmeta .wp-block-post-date { color: var(--cv-muted); font-size: .9rem; }

/* ── Singles: bloque de Fuentes (E-E-A-T) ── */
.cv-fuentes {
	margin-top: 48px;
	padding-top: 32px;
	border-top: 1px solid var(--cv-line);
}
.cv-fuentes h2 { font-size: var(--wp--preset--font-size--lg); margin: 0 0 8px; }
.cv-fuentes__intro { color: var(--cv-muted); font-size: .95rem; margin: 0 0 16px; }
.cv-fuentes li { color: var(--cv-muted); font-size: .95rem; }
.cv-fuentes a { color: var(--cv-primary-hover); }
.cv-fuentes__fecha { color: var(--cv-muted); font-size: .85rem; font-style: normal; margin: 24px 0 0; }
.cv-fuentes__fecha::before { content: "↻ Actualizado el "; }
.cv-fuentes__fecha time { color: inherit; }

/* ── Contenido editorial (singles): lead, media y avisos ─────────────────────
 * Lo usan las fichas/guías publicadas desde tools/content. El placeholder
 * .cv-photo simula el hueco de una foto («Foto aquí») mientras no haya imagen
 * real; al subirla se sustituye por un bloque wp:image normal. */

.cv-lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: var(--cv-primary-hover);
	margin-bottom: 32px;
}

/* Placeholder de imagen — «Foto aquí».
   Nota: el contenido publicado ya usa bloques wp:image reales con la imagen
   modelo (attachment #90), sustituibles por pieza. Esta clase se conserva como
   andamiaje por si se escribe contenido a mano que aún no tiene foto. */
.cv-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	aspect-ratio: 3 / 2;
	margin: 36px 0;
	padding: 24px;
	background:
		radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--cv-primary) 5%, transparent), transparent 60%),
		var(--cv-surface);
	border: 1.5px dashed color-mix(in srgb, var(--cv-primary) 32%, var(--cv-line));
	border-radius: var(--cv-radius-lg);
}
.cv-photo::before {
	content: "";
	width: 46px;
	height: 46px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2318605A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
	opacity: .85;
}
.cv-photo__label {
	margin: 0;
	font-weight: 700;
	color: var(--cv-primary);
	letter-spacing: .01em;
}
.cv-photo__hint {
	margin: 0;
	font-size: .9rem;
	color: var(--cv-muted);
	max-width: 42ch;
}
.cv-photo--wide     { aspect-ratio: 16 / 9; }
.cv-photo--portrait { aspect-ratio: 3 / 4; max-width: 360px; margin-inline: auto; }
.cv-photo--pdf      { aspect-ratio: 1 / 1.3; max-width: 320px; margin-inline: auto; background: var(--cv-panel); }

/* Aviso / consejo / variante: bloque con barra lateral de color */
.cv-callout {
	margin: 28px 0;
	padding: 20px 24px;
	background: var(--cv-panel);
	border: 1px solid var(--cv-line);
	border-left: 4px solid var(--cv-primary);
	border-radius: var(--cv-radius-md);
}
.cv-callout > :first-child { margin-top: 0; }
.cv-callout > :last-child  { margin-bottom: 0; }
.cv-callout__label {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cv-primary-hover);
}
.cv-callout :is(ul, ol) { margin: 0; }
.cv-callout--warn { border-left-color: var(--cv-accent); }
.cv-callout--warn .cv-callout__label { color: var(--cv-accent); }
.cv-callout--tip  { border-left-color: var(--cv-success); }
.cv-callout--tip  .cv-callout__label { color: var(--cv-success); }

/* Par de tarjetas (p. ej. variantes fácil / exigente) */
.cv-variants { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 28px 0; }
.cv-variants .cv-vcard {
	background: #fff;
	border: 1px solid var(--cv-line);
	border-radius: var(--cv-radius-md);
	padding: 22px 24px;
}
.cv-variants .cv-vcard h4 {
	margin: 0 0 6px;
	font-size: var(--wp--preset--font-size--base);
	color: var(--cv-primary);
}
.cv-variants .cv-vcard p { margin: 0; color: var(--cv-muted); }
@media (max-width: 600px) { .cv-variants { grid-template-columns: 1fr; } }

/* ── Cabecera ── */
/* El sticky va en el wrapper del template-part (envuelve solo al header), no en
 * .cv-header: si no, no tiene recorrido y se va con su contenedor al hacer scroll.
 * El selector de elemento `header.` excluye el wrapper del footer. */
header.wp-block-template-part {
	position: sticky; top: 0; z-index: 100;
	margin-block-start: 0;
}
.cv-header {
	background: var(--cv-background); border-bottom: 1px solid var(--cv-line);
	transition: box-shadow .3s var(--cv-ease);
}
.cv-header__bar {
	padding-top: var(--wp--preset--spacing--3);
	padding-bottom: var(--wp--preset--spacing--3);
	transition: padding .3s var(--cv-ease);
}
/* Al hacer scroll (.is-stuck, vía motion.js): sombra + se compacta un punto */
.cv-header.is-stuck { box-shadow: var(--cv-shadow-md); }
.cv-header.is-stuck .cv-header__bar {
	padding-top: var(--wp--preset--spacing--2);
	padding-bottom: var(--wp--preset--spacing--2);
}
@media (prefers-reduced-motion: reduce) {
	.cv-header, .cv-header__bar { transition: none; }
}
.cv-header .wp-block-site-title a { color: var(--cv-primary); font-weight: 700; font-size: 1.3rem; letter-spacing: -.02em; text-decoration: none; }
.cv-header .wp-block-navigation a { color: var(--cv-primary); font-weight: 600; text-decoration: none; }
.cv-header .wp-block-navigation a:hover { color: var(--cv-accent); }
.cv-header .wp-block-button__link { padding: 10px 18px; font-size: .95rem; min-height: 0; }

/* ── Pie ── */
.cv-footer { background: var(--cv-teal-900); color: #fff; }
.cv-footer a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.cv-footer a:hover { color: #fff; }
.cv-footer .wp-block-column p { margin: 0 0 8px; }
.cv-footer__brand { font-weight: 700; font-size: 1.2rem; }
.cv-footer__sig { color: var(--cv-accent-soft); font-size: .95rem; }
.cv-footer__head { color: var(--cv-accent-soft); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; }
.cv-footer__sep { border-color: rgba(255, 255, 255, .18); margin: 32px 0 16px; }
.cv-footer__legal { font-size: .85rem; color: rgba(255, 255, 255, .6); max-width: none; }
.cv-footer__legal strong { color: rgba(255, 255, 255, .85); }

/* ─── Índice de etiquetas ([cv_etiquetas]) ──────────────────────────────── */
.cv-tax-index { display: flex; flex-direction: column; gap: 48px; }
.cv-tax-group__title { font-size: 1.5rem; color: var(--cv-primary); margin: 0 0 4px; }
.cv-tax-group__help { color: var(--cv-muted); font-size: .95rem; margin: 0 0 16px; }
.cv-tax-chips { display: flex; flex-wrap: wrap; gap: 12px; }
.cv-tax-chip {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 18px;
	border: 2px solid var(--cv-line, #D8CDC7);
	border-radius: var(--cv-radius-pill, 50px);
	background: #fff;
	color: var(--cv-ink, #1E2A2D);
	font-weight: 600; font-size: 1rem; line-height: 1.2;
	text-decoration: none;
	transition: background-color .2s var(--cv-ease), border-color .2s var(--cv-ease), color .2s var(--cv-ease);
}
.cv-tax-chip:hover,
.cv-tax-chip:focus-visible {
	border-color: var(--cv-primary, #18605A);
	color: var(--cv-primary, #18605A);
}
.cv-tax-chip__count {
	font-size: .8rem; font-weight: 700;
	background: var(--cv-teal-100, #E1ECEA); color: var(--cv-primary, #18605A);
	border-radius: var(--cv-radius-pill, 50px);
	min-width: 1.6em; padding: 1px 8px; text-align: center;
}
.cv-tax-chip:hover .cv-tax-chip__count,
.cv-tax-chip:focus-visible .cv-tax-chip__count { background: var(--cv-primary, #18605A); color: #fff; }