/* ============================================================
   Daniel de la Hoz — estilos de componente del tema de bloques · v2.0

   Los tokens viven en theme.json. Este archivo traduce los componentes del
   sistema de diseño v2 (documento 02, v2.0) a estilos de bloque.

   Ley 1  serie trazo / medio trazo (2:1)  → escala 48/96, doble filete, pesos 4:2:1
   Ley 2  dos capas desplazadas            → asimetría editorial, entrada de 16 px
   Ley 3  terminaciones cuadradas          → radio 0, trazos butt/miter
   Ley 4  dos valores, sin gris decorativo → monocromo (OKLCH C ≤ 0,015)

   Movimiento: catálogo cerrado (DADR-08). Solo transform, opacity, clip-path
   y stroke-dashoffset; nada en bucle; nada por encima de 400 ms.
   ============================================================ */

/* ---------- 1. Alias locales ---------- */
:root {
  --ddh-base:      var(--wp--preset--color--base);
  --ddh-lift:      var(--wp--preset--color--lift);
  --ddh-card:      var(--wp--preset--color--card);
  --ddh-ink:       var(--wp--preset--color--ink);
  --ddh-body:      var(--wp--preset--color--ink-body);
  --ddh-muted:     var(--wp--preset--color--ink-muted);
  --ddh-rule:      var(--wp--preset--color--rule);
  --ddh-rule-em:   var(--wp--preset--color--rule-em);
  --ddh-via:       var(--wp--preset--color--via-black);
  /* Colores de las OTRAS marcas: solo dentro de su marco citado (DADR-04/05).
     Fuera de los marcos, el validador exige OKLCH C ≤ 0,015. */
  --ddh-via-1:     var(--wp--custom--via-blue-light);   /* #0066B1 */
  --ddh-via-2:     var(--wp--custom--via-blue-dark);    /* #1C69D4 */
  --ddh-via-3:     var(--wp--custom--via-red);          /* #E22718 */
  --ddh-dm:        var(--wp--custom--dm-blue);          /* #0061FE */
  --ddh-field:     var(--wp--custom--field-border);
  /* Movimiento v2 (DADR-08): entrada 320 · estado 160 · presión 120 · máximo 400 ms. */
  --ddh-ease:      var(--wp--custom--ease);
  --ddh-ease-sale: var(--wp--custom--ease-out);
  --ddh-dur-in:    var(--wp--custom--dur-in);
  --ddh-dur-state: var(--wp--custom--dur-state);
  --ddh-dur-press: var(--wp--custom--dur-press);
  --ddh-measure:   var(--wp--custom--measure);
  --ddh-nav-h:     var(--wp--custom--nav-height);
  /* Pesos del sistema gráfico (DADR-09): 4 : 2 : 1 = trazo, medio trazo, filete. */
  --ddh-trazo: 4px; --ddh-medio: 2px; --ddh-filete: 1px;
  /* Relleno de sección: corto en móvil (CA-D4), pleno en escritorio. */
  --ddh-sec: clamp(64px, 4vw + 48px, 128px);

  --ddh-surface:      var(--ddh-base);
  --ddh-surface-card: var(--ddh-card);
  --ddh-surface-rule: var(--ddh-rule);
  --ddh-surface-rule-em: var(--ddh-rule-em);
}

html { scroll-padding-top: calc(var(--ddh-nav-h) + 16px); }
/* Sin `scroll-behavior: smooth` (2.1.2): desplazaba también el desplazamiento
   programático y desordenaba las capturas de página entera. No está en el
   catálogo de movimiento. */
/* `overflow-x: clip`, no `hidden`: `hidden` crea contenedor de desplazamiento y
   anula el `position: sticky` de la cabecera. */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
@supports (overflow-x: clip) { body { overflow-x: clip; } }
:target { scroll-margin-top: calc(var(--ddh-nav-h) + 24px); }
img, svg, video { max-width: 100%; height: auto; }

/* ---------- 2. Foco visible — contraste, no color (Ley 4) ---------- */
:focus-visible {
  outline: 2px solid var(--ddh-ink);
  outline-offset: 2px;
}
/* Enlace de salto: se usa el que inyecta WordPress, con el estilo del sistema.
   Dos enlaces de salto serían redundantes para quien navega con lector de pantalla. */
.skip-link.screen-reader-text:focus {
  position: absolute !important;
  left: 24px !important; top: 16px !important;
  width: auto !important; height: auto !important;
  clip: auto !important; clip-path: none !important;
  z-index: 100000;
  background: var(--ddh-ink) !important; color: var(--ddh-base) !important;
  padding: 14px 24px !important; min-height: 44px !important; display: inline-flex !important;
  align-items: center !important; text-decoration: none !important;
  font-family: var(--wp--preset--font-family--mono) !important;
  font-size: var(--wp--preset--font-size--label) !important;
  letter-spacing: .16em; text-transform: uppercase;
  border-radius: 0 !important; box-shadow: none !important;
}

/* ---------- 3. Superficies ----------
   Tres pasos que se perciben (ΔL ≈ 0,07 en OKLCH): base · levantada · levantada 2.
   La «hundida» ya no existe como superficie de sección (DADR-07): la clase se
   conserva para no romper contenido guardado, y resuelve a la base. */
.is-style-ddh-band {
  --ddh-surface: var(--ddh-lift);
  --ddh-surface-card: var(--wp--custom--lift-card);
  --ddh-surface-rule: var(--wp--custom--lift-rule);
  --ddh-surface-rule-em: var(--wp--custom--lift-rule-em);
  background-color: var(--ddh-lift);
  border-top: 1px solid var(--ddh-rule);
  border-bottom: 1px solid var(--ddh-rule);
}
.is-style-ddh-sunken { --ddh-surface: var(--ddh-base); background-color: var(--ddh-base); }

/* Marcas citadas (DADR-05). Negro plano #000000, SIEMPRE enmarcado y nunca a
   sangre. Dentro solo va lo de la otra marca: su logotipo y un enlace. La voz
   de Daniel queda fuera, sobre su superficie, y es la que abre la cita.
   La línea de firma de VIARTIFICIAL ya viene en su logotipo: no se redibuja. */
.is-style-ddh-via-frame {
  --ddh-surface: var(--ddh-via);
  --ddh-surface-rule: #1E1E1E;
  --ddh-surface-rule-em: #2E2E2E;
  background-color: var(--ddh-via);
  border: 1px solid #2E2E2E;
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  position: relative;
}
@media (min-width: 1024px) {
  .is-style-ddh-via-frame { padding: var(--wp--preset--spacing--80); }
}
/* Logotipos citados: en SU color (sin filtro) y con altura óptica VIA ≥ Dato. */
.ddh-cita img { filter: none; }

/* ---------- 4. Tarjeta ----------
   Sin sombra y sin reflejo (Ley 4). Si la tarjeta es un enlace, su estado lo
   dicen el filete superior que se recorre y 2 px de elevación (C3). */
.is-style-ddh-card {
  position: relative;
  background-color: var(--ddh-surface-card);
  border: 1px solid var(--ddh-surface-rule);
  padding: var(--wp--preset--spacing--60);
  height: 100%;
  transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.is-style-ddh-card::before {
  content: ""; position: absolute; inset-inline: -1px; inset-block-start: -1px; block-size: 1px;
  background: var(--ddh-ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.is-style-ddh-card:hover, .is-style-ddh-card:focus-within { border-color: var(--ddh-surface-rule-em); }
.is-style-ddh-card:has(a):hover::before, .is-style-ddh-card:focus-within::before,
a.is-style-ddh-card:hover::before { transform: scaleX(1); }
.is-style-ddh-card:has(a):hover, a.is-style-ddh-card:hover { transform: translateY(-2px); }
a.is-style-ddh-card { text-decoration: none; display: block; color: inherit; }

/* ---------- 5. Aviso y material pendiente ----------
   Pendiente = forma y texto, nunca color (DADR-04, WCAG 1.4.1): borde
   discontinuo, cuadrado HUECO delante (el mismo marcador de «pendiente» de los
   diagramas) y el texto «Pendiente —» escrito. */
.is-style-ddh-notice {
  position: relative;
  border: 1px solid var(--ddh-surface-rule-em);
  padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) calc(var(--wp--preset--spacing--60) + 10px);
}
.is-style-ddh-notice::before { /* doble filete vertical: 4 · 2 · 4 (Ley 1) */
  content: ""; position: absolute; inset-block: -1px; inset-inline-start: -1px; inline-size: 10px;
  background: linear-gradient(to right, var(--ddh-ink) 0 4px, transparent 4px 6px, var(--ddh-ink) 6px 10px);
}
.is-style-ddh-slot {
  background-color: transparent;
  border: 1px dashed var(--ddh-surface-rule-em);
  padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60);
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: center; gap: var(--wp--preset--spacing--40);
}
p.is-style-ddh-pending, p.is-style-ddh-pendiente, .ddh-pendiente {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .12em; text-transform: uppercase; line-height: 1.4;
  color: var(--ddh-ink);
  border: 1px dashed var(--ddh-muted);
  padding: 8px 12px; margin: 0;
}
p.is-style-ddh-pending::before, p.is-style-ddh-pendiente::before, .ddh-pendiente::before {
  content: ""; inline-size: 8px; block-size: 8px; flex: none;
  border: 1.5px solid currentColor; box-sizing: border-box;
}

/* ---------- 6. Tipografía de componente ---------- */
p.is-style-ddh-label, h1.is-style-ddh-label, h2.is-style-ddh-label,
h3.is-style-ddh-label, h4.is-style-ddh-label, h5.is-style-ddh-label, h6.is-style-ddh-label {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ddh-muted);
}
p.is-style-ddh-lead {
  font-size: var(--wp--preset--font-size--lead);
  font-weight: 400;
  line-height: 1.52;
  color: var(--ddh-body);
  max-width: var(--ddh-measure);
}
p.is-style-ddh-figure {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--figure);
  font-weight: 400; line-height: 1; letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
  color: var(--ddh-ink);
  margin: 0;
}

/* Medida de lectura — solo dentro del contenido editorial */
.ddh-prose > p, .ddh-prose > ul, .ddh-prose > ol, .ddh-prose > blockquote {
  max-width: var(--ddh-measure);
}

/* ---------- 7. Listas ---------- */
ul.is-style-ddh-ticks { list-style: none; padding-left: 0; }
ul.is-style-ddh-ticks li {
  position: relative; padding-left: var(--wp--preset--spacing--60);
  font-size: var(--wp--preset--font-size--small);
}
ul.is-style-ddh-ticks li + li { margin-top: var(--wp--preset--spacing--30); }
ul.is-style-ddh-ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 1px; background: var(--ddh-ink);
}
ol.is-style-ddh-numbered { list-style: none; padding-left: 0; counter-reset: ddhn; }
ol.is-style-ddh-numbered li {
  counter-increment: ddhn; position: relative; padding-left: var(--wp--preset--spacing--80);
}
ol.is-style-ddh-numbered li + li { margin-top: var(--wp--preset--spacing--50); }
ol.is-style-ddh-numbered li::before {
  content: counter(ddhn, decimal-leading-zero); position: absolute; left: 0; top: .1em;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  letter-spacing: .16em; color: var(--ddh-muted);
}

/* ---------- 8. Doble filete: firma gráfica (Ley 1) ----------
   Dos barras de 4 px separadas por un aire de 2 px: la relación 2:1 del
   monograma. Máximo dos apariciones por pantalla. */
.wp-block-separator.is-style-ddh-mark {
  border: 0 !important; width: 48px !important; height: 10px !important; opacity: 1;
  background: linear-gradient(to bottom,
    var(--ddh-ink) 0 4px, transparent 4px 6px, var(--ddh-ink) 6px 10px);
}
@media (max-width: 639px) { .wp-block-separator.is-style-ddh-mark { width: 40px !important; } }
.wp-block-separator.is-style-ddh-mark-v {
  border: 0 !important; width: 10px !important; height: 48px !important; opacity: 1;
  background: linear-gradient(to right,
    var(--ddh-ink) 0 4px, transparent 4px 6px, var(--ddh-ink) 6px 10px);
}
/* Separador ordinario: filete de 1 px */
.wp-block-separator:not(.is-style-ddh-mark):not(.is-style-ddh-mark-v) {
  border: 0 !important; border-top: 1px solid var(--ddh-surface-rule) !important; opacity: 1;
  height: 0; width: 100% !important; max-width: none !important; margin-left: 0; margin-right: 0;
}

/* ---------- 9. Cadena de fases ---------- */
.wp-block-columns.is-style-ddh-chain {
  border-top: 1px solid var(--ddh-surface-rule);
  gap: 0;
  margin-block-start: var(--wp--preset--spacing--60);
}
.wp-block-columns.is-style-ddh-chain > .wp-block-column {
  padding: var(--wp--preset--spacing--60) var(--wp--preset--spacing--50) var(--wp--preset--spacing--60) 0;
  border-right: 1px solid var(--ddh-surface-rule);
}
.wp-block-columns.is-style-ddh-chain > .wp-block-column:last-child { border-right: 0; }
@media (max-width: 781px) {
  .wp-block-columns.is-style-ddh-chain > .wp-block-column {
    border-right: 0; border-bottom: 1px solid var(--ddh-surface-rule);
    padding: var(--wp--preset--spacing--50) 0;
  }
  .wp-block-columns.is-style-ddh-chain > .wp-block-column:last-child { border-bottom: 0; }
}

/* ---------- 10. Asimetría editorial (Ley 2) ---------- */
@media (min-width: 1024px) {
  .wp-block-columns.is-style-ddh-editorial > .wp-block-column:first-child { flex-basis: 30% !important; }
  .wp-block-columns.is-style-ddh-editorial > .wp-block-column:last-child  { flex-basis: 70% !important; }
}

/* ---------- 11. Fila de fase del método ---------- */
.is-style-ddh-phase {
  border-top: 1px solid var(--ddh-surface-rule);
  padding-block: var(--wp--preset--spacing--70);
}
.is-style-ddh-phase:last-of-type { border-bottom: 1px solid var(--ddh-surface-rule); }

/* Lista de definiciones de la fase, compuesta con una tabla de bloques */
.ddh-deflist table { border-collapse: collapse; width: 100%; }
.ddh-deflist th, .ddh-deflist td {
  text-align: left; vertical-align: top; border: 0;
  border-bottom: 1px solid var(--ddh-surface-rule);
  padding: var(--wp--preset--spacing--40) var(--wp--preset--spacing--50) var(--wp--preset--spacing--40) 0;
}
.ddh-deflist th {
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ddh-muted); width: 25%;
}
.ddh-deflist td { font-size: var(--wp--preset--font-size--small); }

/* ---------- 12. Tablas ---------- */
.wp-block-table { overflow-x: auto; }
.wp-block-table table { border-collapse: collapse; }
.wp-block-table th {
  text-align: left;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ddh-muted);
  border: 0; border-bottom: 1px solid var(--ddh-surface-rule-em);
  padding: 12px 24px 12px 0; vertical-align: bottom;
}
.wp-block-table td {
  border: 0; border-bottom: 1px solid var(--ddh-surface-rule);
  padding: 16px 24px 16px 0; vertical-align: top;
}
.wp-block-table th:last-child, .wp-block-table td:last-child { padding-right: 0; }

/* ---------- 13. Botones ----------
   C1 · Lo que dice un botón: que es pulsable y ADÓNDE lleva. La flecha lo
   escribe: → se queda en el sitio, ↗ va a otra marca o a otro dominio.
   Sin brillo, sin reflejo, sin vidrio, sin sombra (DADR-08). */
.wp-block-button__link, .wp-element-button {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  border-radius: 0 !important;
  transition: transform var(--ddh-dur-press) var(--ddh-ease);
}
.wp-block-button__link::after {
  content: "→"; font-family: var(--wp--preset--font-family--text); font-weight: 400;
  display: inline-block; transition: transform var(--ddh-dur-state) var(--ddh-ease);
}
.wp-block-button__link[href^="http"]:not([href*="danieldelahoz.co"])::after,
.wp-block-button__link[href^="mailto:"]::after { content: "↗"; }
.wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after { transform: translateX(4px); }
.wp-block-button__link[href^="http"]:not([href*="danieldelahoz.co"]):hover::after,
.wp-block-button__link[href^="mailto:"]:hover::after { transform: translate(3px, -3px); }
.wp-block-button__link:active { transform: scale(.98); }

.wp-block-button.is-style-outline > .wp-block-button__link {
  color: var(--ddh-ink); background: transparent; border: 1px solid var(--ddh-ink);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-outline > .wp-block-button__link:focus-visible {
  background: var(--ddh-ink); color: var(--ddh-base);
}
@media (prefers-reduced-motion: reduce) {
  .wp-block-button__link::after { transition: none; }
  .wp-block-button__link:hover::after { transform: none; }
  .wp-block-button__link:active { transform: none; }
}

/* ---------- 14. Enlaces ---------- */
.ddh-prose a, .wp-block-post-content a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.ddh-prose a:hover, .wp-block-post-content a:hover { text-decoration-thickness: 2px; }

/* C4 · Enlace de etiqueta con flecha. Objetivo táctil de 44 px (CA-D7): el
   texto se ve igual, el área que se toca crece. El filete inferior se recorre
   al pasar (transform, no width). */
.ddh-llink a, a.ddh-llink {
  position: relative;
  display: inline-flex; align-items: center; gap: 8px;
  min-block-size: 44px;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ddh-ink); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--ddh-surface-rule-em);
}
.ddh-llink a::before, a.ddh-llink::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  background: var(--ddh-ink); transform: scaleX(0); transform-origin: left;
  transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.ddh-llink a:hover::before, a.ddh-llink:hover::before,
.ddh-llink a:focus-visible::before, a.ddh-llink:focus-visible::before { transform: scaleX(1); }
.ddh-llink a:hover, a.ddh-llink:hover { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .ddh-llink a::before, a.ddh-llink::before { transition: none; } }
/* Enlace que abre otra pestaña: se avisa (WCAG 3.2.5). */
a[target="_blank"]::after { content: " ↗"; }

/* ---------- 15. Cabecera y navegación (DADR-10) ----------
   La navegación la escribe el tema (inc/navegacion.php), no el bloque del
   núcleo: se mide la rotura entre 790 y 1.200 px y los rótulos en inglés.
   Por debajo de 1.200 px, hamburguesa. El panel es un <dialog> nativo: trampa
   de foco, Escape y fondo inerte sin código propio. */
.wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; }
.ddh-header { position: relative; background: transparent; }
.ddh-header::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in srgb, var(--ddh-base) 86%, transparent);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);   /* sin saturate(): no amplifica croma */
}
@supports not (backdrop-filter: blur(1px)) { .ddh-header::before { background: var(--ddh-base); } }
/* H1 · El filete aparece cuando el contenido ya pasa por debajo (opacity de un
   pseudoelemento; no se anima border-color). */
.ddh-header::after {
  content: ""; position: absolute; inset-inline: 0; inset-block-end: 0; block-size: 1px;
  background: var(--ddh-rule);
}
.ddh-barra {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-block-size: var(--ddh-nav-h);
}
.ddh-marca { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--ddh-ink); flex-shrink: 0; }
.ddh-marca svg { display: block; block-size: 28px; inline-size: auto; }
.ddh-marca--mono svg { block-size: 32px; }
@media (min-width: 600px) { .ddh-marca--mono { display: none; } }
@media (max-width: 599px) { .ddh-marca--lockup { display: none; } }

.ddh-nav { position: relative; display: none; }
.ddh-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 8px; }
.ddh-nav a {
  display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: 12px;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small);
  font-weight: 500; color: var(--ddh-body); text-decoration: none; white-space: nowrap; position: relative;
}
.ddh-nav a:hover, .ddh-nav a[aria-current="page"] { color: var(--ddh-ink); }
/* T2 · indicador: doble filete 4 · 2 · 4 (Ley 1). Respaldo por enlace activo. */
.ddh-nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 12px; bottom: 2px; width: 24px; height: 10px;
  background: linear-gradient(to bottom, var(--ddh-ink) 0 4px, transparent 4px 6px, var(--ddh-ink) 6px 10px);
  view-transition-name: ddh-indicador;
}
.ddh-acciones { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ddh-cta-cab {
  display: none; align-items: center; min-block-size: 44px; padding-inline: 20px; white-space: nowrap;
  background: var(--ddh-ink); color: var(--ddh-base); text-decoration: none;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 500;
}
.ddh-cta-cab:hover { background: var(--ddh-body); color: var(--ddh-base); text-decoration: none; }
@media (min-width: 600px) { .ddh-cta-cab { display: inline-flex; } }
@media (min-width: 1200px) { .ddh-nav { display: block; } .ddh-menu-abrir { display: none !important; } }

/* Disparador: las dos barras del doble filete. El cierre (dentro del panel)
   las muestra ya cruzadas en X: son dos botones, no una transición. */
.ddh-menu-abrir, .ddh-menu-cerrar {
  inline-size: 44px; block-size: 44px; display: inline-grid; place-items: center;
  background: transparent; border: 0; padding: 0; color: var(--ddh-ink); cursor: pointer;
}
.ddh-barras { position: relative; inline-size: 24px; block-size: 10px; }
.ddh-barras::before, .ddh-barras::after {
  content: ""; position: absolute; inset-inline: 0; block-size: 2px; background: currentColor;
}
.ddh-barras::before { top: 0; } .ddh-barras::after { bottom: 0; }
.ddh-menu-cerrar .ddh-barras::before { transform: translateY(4px) rotate(45deg); }
.ddh-menu-cerrar .ddh-barras::after { transform: translateY(-4px) rotate(-45deg); }

/* ---------- 16. Pie ---------- */
.ddh-footer {
  border-top: 1px solid var(--ddh-rule);
  padding-block: var(--wp--preset--spacing--80) var(--wp--preset--spacing--70);
}
.ddh-footer .wp-block-site-logo img { height: 34px; width: auto; }
.ddh-footer a { text-decoration: none; color: var(--ddh-body); }
.ddh-footer a:hover { color: var(--ddh-ink); text-decoration: underline; text-underline-offset: 4px; }

/* ---------- 17. Formularios ---------- */
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="search"], select, textarea {
  background: var(--ddh-card);
  color: var(--ddh-ink);
  border: 1px solid var(--ddh-field);
  border-radius: 0;
  padding: 14px 16px;
  min-height: 52px;
  width: 100%;
  font-family: var(--wp--preset--font-family--text);
  font-size: var(--wp--preset--font-size--body);
}
textarea { min-height: 148px; resize: vertical; line-height: 1.6; }
input:hover, select:hover, textarea:hover { border-color: var(--ddh-body); }
input:focus, select:focus, textarea:focus { border-color: var(--ddh-ink); }
label {
  display: block;
  font-family: var(--wp--preset--font-family--mono);
  font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ddh-muted); margin-bottom: 8px;
}

/* ---------- 19. Utilidades ---------- */
.ddh-measure { max-width: var(--ddh-measure); }
.ddh-measure-sm { max-width: var(--wp--custom--measure-sm); }
.ddh-mono { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }
.ddh-dim { color: var(--ddh-muted); }
.screen-reader-text {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* Las imágenes van en blanco y negro: la dirección fotográfica no admite color. */
.wp-block-image img, .wp-block-post-featured-image img {
  filter: grayscale(1) contrast(1.04) brightness(.94);
  border-radius: 0;
}

/* ---------- 20. Impresión ----------
   Guardar como PDF tiene que dar el documento entero: ninguna animación ligada
   al desplazamiento puede dejar contenido a opacidad 0 en papel (medido en la
   v1.12: 61 de 1.179 palabras). */
@media print {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ddh-por-revelar, .is-style-ddh-anim, .is-style-ddh-escalonado > * { opacity: 1 !important; transform: none !important; }
  .ddh-header, .ddh-footer, .wp-block-buttons, .ddh-menu, .ddh-progreso { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  * { color: #000 !important; background: transparent !important; }
  .ddh-dia svg * { stroke: #000 !important; }
  .ddh-dia svg text { fill: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; }
}

/* ---------- 21. Alineación a la izquierda dentro de la maquetación restringida ----------
   WordPress centra por defecto todo hijo más estrecho que el ancho de contenido.
   El sistema es editorial y alineado a la izquierda: se corrige aquí, no bloque a bloque. */
.wp-block-separator.is-style-ddh-mark,
.wp-block-separator.is-style-ddh-mark-v {
  margin-left: 0 !important;
  margin-right: auto !important;
}
.ddh-measure,
.ddh-measure-sm,
p.is-style-ddh-lead,
p.is-style-ddh-pending {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- 22. Alineación a la izquierda ----------
   La maquetación restringida de WordPress centra todo hijo más estrecho que el
   ancho de contenido. Este sistema es editorial y alineado a la izquierda, así
   que se corrige en las secciones a sangre y en los contenedores propios.
   Se excluyen cabecera y pie, que sí van centrados en pantallas muy anchas, y
   el contenedor raíz, que es quien centra la columna de contenido.
   Lleva !important porque las reglas de maquetación de WordPress se imprimen
   después de esta hoja y usan la misma especificidad. */
.wp-block-group.alignfull.is-layout-constrained:not(.ddh-header):not(.ddh-footer)
  > :not(.alignfull):not(.alignwide):not(.aligncenter):not(.alignright),
.is-style-ddh-slot > *,
.is-style-ddh-notice > *,
.is-style-ddh-card > *,
.is-style-ddh-via-frame > *,
.is-style-ddh-phase > * {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* El enlace del logotipo también es un objetivo táctil: 44 px de alto mínimo. */
.custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 24. Contact Form 7 ----------
   Error y éxito en monocromo: forma, prefijo escrito y aria-invalid; nunca
   solo color (WCAG 1.4.1, DADR-04). */
.wpcf7 { max-width: 46rem; }
.wpcf7 .ddh-f { margin: 0 0 var(--wp--preset--spacing--50); }
.wpcf7 label { width: 100%; }
.wpcf7 input, .wpcf7 textarea, .wpcf7 select { font-size: max(16px, var(--wp--preset--font-size--body)); }
.wpcf7 input[type="submit"] {
  display: inline-block; width: auto;
  background: var(--ddh-ink); color: var(--ddh-base);
  border: 1px solid var(--ddh-ink); border-radius: 0;
  padding: 15px var(--wp--preset--spacing--60); min-height: 52px;
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--small); font-weight: 500; letter-spacing: .02em;
  cursor: pointer;
}
.wpcf7 input[type="submit"]:hover { background: transparent; color: var(--ddh-ink); }
.wpcf7 input[type="submit"]:focus-visible { outline: 2px solid var(--ddh-ink); outline-offset: 3px; }
.wpcf7 form .wpcf7-response-output {
  position: relative; margin: var(--wp--preset--spacing--50) 0 0;
  padding: 14px 16px 14px 26px; border: 1px solid var(--ddh-rule-em); border-radius: 0;
  font-size: var(--wp--preset--font-size--small); color: var(--ddh-ink);
}
.wpcf7 form.invalid .wpcf7-response-output, .wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--ddh-ink); }
.wpcf7 form.invalid .wpcf7-response-output::before, .wpcf7 form.unaccepted .wpcf7-response-output::before,
.wpcf7 form.failed .wpcf7-response-output::before {
  content: ""; position: absolute; inset-block: -1px; inset-inline-start: -1px; inline-size: 10px;
  background: linear-gradient(to right, var(--ddh-ink) 0 4px, transparent 4px 6px, var(--ddh-ink) 6px 10px);
}
.wpcf7-not-valid-tip {
  display: block; margin-top: 8px;
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--caption);
  letter-spacing: .04em; color: var(--ddh-ink);
}
.wpcf7-not-valid-tip::before { content: "Error: "; font-weight: 500; }
.wpcf7 input.wpcf7-not-valid, .wpcf7 textarea.wpcf7-not-valid,
.wpcf7 [aria-invalid="true"] { border-color: var(--ddh-ink); box-shadow: inset 0 0 0 1px var(--ddh-ink); }
.wpcf7-spinner { background-color: var(--ddh-muted); }

/* ---------- 32. Gráficos de informe ----------
   Monocromo (DADR-04): las series se distinguen por valor, relleno y trazo,
   con rotulado directo; nunca por color.
     S1 sólido tinta · S2 sólido gris de lectura · S3 contorno · S4 contorno discontinuo
     Líneas: 2 px sólida · discontinua 6/4 · punteada 1/4 · 1 px sólida */
.ddh-grafico { --ddh-g-rejilla: #2A2A27; margin: var(--wp--preset--spacing--70) 0; }
.ddh-grafico__etiqueta { margin: 0 0 var(--wp--preset--spacing--30); }
.ddh-grafico__titulo {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4);
  line-height: 1.25; margin: 0 0 var(--wp--preset--spacing--40); color: var(--ddh-ink);
}
.ddh-grafico__lienzo { position: relative; }
.ddh-grafico__svg { display: block; width: 100%; height: auto; overflow: visible; }
.ddh-grafico__rejilla { stroke: var(--ddh-g-rejilla); stroke-width: 1; }
.ddh-grafico__base    { stroke: var(--ddh-surface-rule-em, #3B3A37); stroke-width: 1; }
.ddh-grafico__tick, .ddh-grafico__cat, .ddh-grafico__valor, .ddh-grafico__extremo {
  font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums;
  fill: var(--ddh-muted); font-size: 13px;
}
.ddh-grafico__valor, .ddh-grafico__extremo { fill: var(--ddh-ink); font-size: 15px; font-weight: 500; }
.ddh-serie-1 { --c: var(--ddh-ink);  --f: var(--ddh-ink);  --d: none; }
.ddh-serie-2 { --c: var(--ddh-muted);--f: var(--ddh-muted);--d: 6 4; }
.ddh-serie-3 { --c: var(--ddh-ink);  --f: transparent;     --d: 1 4; }
.ddh-serie-4 { --c: var(--ddh-body); --f: transparent;     --d: none; }
.ddh-grafico__col   { fill: var(--f); stroke: var(--c); stroke-width: 1.5; }
.ddh-serie-4 .ddh-grafico__col { stroke-dasharray: 4 3; }
.ddh-grafico__linea { fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: var(--d); stroke-linecap: butt; stroke-linejoin: miter; }
.ddh-serie-4 .ddh-grafico__linea { stroke-width: 1; }
.ddh-grafico__punto { fill: var(--c); stroke: var(--ddh-base); stroke-width: 2; }
.ddh-grafico__leyenda {
  display: flex; flex-wrap: wrap; gap: 8px 24px; list-style: none; margin: 0 0 var(--wp--preset--spacing--40); padding: 0;
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ddh-body);
}
.ddh-grafico__leyenda li { display: inline-flex; align-items: center; gap: 8px; }
.ddh-grafico__muestra { inline-size: 12px; block-size: 12px; background: var(--f); border: 1.5px solid var(--c); box-sizing: border-box; flex: none; }
.ddh-grafico__fuente, .ddh-grafico__nota {
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  letter-spacing: .08em; color: var(--ddh-muted); margin: var(--wp--preset--spacing--40) 0 0;
}
.ddh-grafico__datos { margin-top: var(--wp--preset--spacing--40); }
.ddh-grafico__datos summary {
  cursor: pointer; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  letter-spacing: .16em; text-transform: uppercase; color: var(--ddh-ink); padding: 8px 0; min-block-size: 44px;
  display: flex; align-items: center;
}
.ddh-grafico__tabla { width: 100%; margin-top: var(--wp--preset--spacing--30); font-size: var(--wp--preset--font-size--small); }
.ddh-grafico__tabla th, .ddh-grafico__tabla td { text-align: left; padding: 10px 16px 10px 0; border-bottom: 1px solid var(--ddh-rule); }
.ddh-grafico__tabla td { font-family: var(--wp--preset--font-family--mono); font-variant-numeric: tabular-nums; }

/* ---------- 33. G4 · El gráfico se resuelve mientras se lee ----------
   Solo transform, opacity y stroke-dashoffset (DADR-08). La columna crece con
   scaleY desde su base (transform-box: fill-box): no se recalcula geometría. */
/* Se dispara una vez, por tiempo, cuando el gráfico asoma al bajar (ddh.js:
   ddh-por-trazar, armado fuera de pantalla → ddh-trazado). En reposo, completo. */
@media screen and (prefers-reduced-motion: no-preference) {
  .ddh-grafico.ddh-por-trazar .ddh-grafico__col { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); }
  .ddh-grafico.ddh-por-trazar .ddh-serie-1 .ddh-grafico__linea, .ddh-grafico.ddh-por-trazar .ddh-serie-4 .ddh-grafico__linea { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .ddh-grafico.ddh-por-trazar .ddh-grafico__punto, .ddh-grafico.ddh-por-trazar .ddh-grafico__extremo, .ddh-grafico.ddh-por-trazar .ddh-grafico__valor { opacity: 0; }
  .ddh-grafico.ddh-trazado .ddh-grafico__col { transform: scaleY(1); transition: transform 400ms var(--ddh-ease) min(calc(var(--r, 0) * 1ms), 240ms); }
  .ddh-grafico.ddh-trazado .ddh-serie-1 .ddh-grafico__linea, .ddh-grafico.ddh-trazado .ddh-serie-4 .ddh-grafico__linea { stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--ddh-ease); }
  .ddh-grafico.ddh-trazado .ddh-grafico__punto, .ddh-grafico.ddh-trazado .ddh-grafico__extremo, .ddh-grafico.ddh-trazado .ddh-grafico__valor { opacity: 1; transition: opacity 160ms var(--ddh-ease) 400ms; }
}
@keyframes ddh-crecer  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes ddh-trazar  { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ddh-aparecer { from { opacity: 0; } to { opacity: 1; } }

/* ---------- 34. Gráficos en pantalla estrecha ----------
   El SVG escala uniforme: a 390 px de ancho el lienzo de 960 unidades se
   dibuja a 0,36×, y un texto de 13 unidades aterriza en 4,7 px —ilegible—.
   Son dos correcciones y ninguna es opcional:

   1. Un ancho mínimo para el lienzo, con desplazamiento lateral SOLO dentro
      del gráfico. Un informe con gráficos que no se leen no es un informe.
   2. El tamaño del texto se compensa contra la escala. No es un ajuste «para
      móvil»: es deshacer la reducción que el propio escalado introduce. */
/* Tramo intermedio: a 834 px el lienzo se dibuja a 0,78× y el texto caía a
   10,2 px, peor que en el móvil, porque allí sí había compensación y aquí no.
   La escala es continua, así que la compensación también tiene que serlo. */
@media (min-width: 782px) and (max-width: 1099px) {
  .ddh-grafico__tick, .ddh-grafico__cat { font-size: 17px; }
  .ddh-grafico__valor, .ddh-grafico__extremo { font-size: 19px; }
}

@media (max-width: 781px) {
  .ddh-grafico__lienzo {
    overflow-x: auto;
    overscroll-behavior-x: contain;         /* no arrastra la página al llegar al borde */
    scrollbar-width: thin;
    padding-bottom: 8px;
  }
  .ddh-grafico__svg { min-inline-size: 560px; }
  .ddh-grafico__tick, .ddh-grafico__cat { font-size: 21px; }
  .ddh-grafico__valor, .ddh-grafico__extremo { font-size: 24px; }
  .ddh-grafico__punto { r: 5; stroke-width: 3; }
  .ddh-grafico__linea { stroke-width: 3; }
}

/* ---------- 37. Agendamiento ----------
   La portada del bloque es del sitio, no de Zoho. Sin vidrio, sin barrido:
   el botón es el primario del sistema (C1). Solo vive detrás de la puerta
   «Daniel en la sala» (DADR-03). */
.ddh-agenda { margin-block: var(--wp--preset--spacing--60); }
.ddh-agenda__portada { border: 1px solid var(--ddh-rule); background: var(--ddh-card); padding: clamp(24px, 4vw, 48px); }
.ddh-agenda.is-abierta .ddh-agenda__portada { display: none; }
.ddh-agenda__titulo {
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-3); font-weight: 500;
  line-height: 1.2; color: var(--ddh-ink); margin: var(--wp--preset--spacing--40) 0 0;
}
.ddh-agenda__ficha { list-style: none; margin: var(--wp--preset--spacing--60) 0 0; padding: 0; display: grid; }
.ddh-agenda__ficha li {
  display: grid; grid-template-columns: minmax(120px, 160px) 1fr; gap: 16px;
  padding: 14px 0; border-top: 1px solid var(--ddh-rule); color: var(--ddh-body);
}
.ddh-agenda__ficha li span {
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ddh-muted);
}
@media (max-width: 600px) { .ddh-agenda__ficha li { grid-template-columns: 1fr; gap: 4px; } }
.ddh-agenda__abrir {
  margin-top: var(--wp--preset--spacing--60); min-block-size: 52px; padding-inline: 32px;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--small); font-weight: 500;
  color: var(--ddh-base); background: var(--ddh-ink); border: 0; border-radius: 0; cursor: pointer;
  transition: transform var(--ddh-dur-press) var(--ddh-ease);
}
.ddh-agenda__abrir:hover { background: var(--ddh-body); }
.ddh-agenda__abrir:active { transform: scale(.98); }
.ddh-agenda__aviso {
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  letter-spacing: .06em; color: var(--ddh-muted); margin: var(--wp--preset--spacing--40) 0 0; max-inline-size: 60ch;
}
.ddh-agenda__marco { border: 1px solid var(--ddh-rule); }
.ddh-agenda__marco iframe { display: block; inline-size: 100%; block-size: min(78vh, 920px); min-block-size: 520px; border: 0; background: var(--ddh-base); }
.ddh-agenda__marco:focus-visible { outline: 2px solid var(--ddh-ink); outline-offset: 2px; }

/* ---------- 40. Ritmo de secciones (DADR-07) ----------
   Sin franjas entre secciones a sangre (el blockGap raíz las metía) y un solo
   relleno vertical para todas: corto en móvil, pleno en escritorio. */
#ddh-main > .wp-block-group.alignfull, #ddh-main > .wp-block-post-content > .wp-block-group.alignfull,
.wp-block-post-content > .wp-block-group.alignfull { margin-block: 0 !important; }
.ddh-seccion { padding-block: var(--ddh-sec) !important; }
.ddh-hero { padding-block: clamp(24px, 3vw + 12px, 96px) var(--ddh-sec) !important; }

/* ---------- 41. Lectura ----------
   Cuerpo estable (17 px), etiquetas ≥ 13 px, entrada en peso 400. */
.is-style-ddh-label, p.is-style-ddh-label { line-height: 1.45; }
h3, .has-h-3-font-size { text-wrap: balance; }
h1, h2, .has-display-font-size { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- 42. Menú (M1) ----------
   <dialog> nativo. En móvil la lista se ancla ABAJO, donde llega el pulgar, y
   el botón de cerrar también. Se lee en orden: los ítems llegan con 30 ms de
   escalonado. Al cerrar, 120 ms; con movimiento reducido, nada se desplaza. */
.ddh-menu {
  position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
  margin: 0; padding: 0; border: 0; background: var(--ddh-base); color: var(--ddh-ink);
  opacity: 0; transition: opacity var(--ddh-dur-press) var(--ddh-ease-sale), display var(--ddh-dur-press) allow-discrete, overlay var(--ddh-dur-press) allow-discrete;
}
.ddh-menu[open] { opacity: 1; transition: opacity var(--ddh-dur-state) var(--ddh-ease), display var(--ddh-dur-state) allow-discrete, overlay var(--ddh-dur-state) allow-discrete; }
@starting-style { .ddh-menu[open] { opacity: 0; } }
.ddh-menu::backdrop { background: transparent; }
.ddh-menu__caja {
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--wp--preset--spacing--60);
  min-block-size: 100%; box-sizing: border-box;
  padding: var(--wp--preset--spacing--60) clamp(24px, 5vw, 64px) var(--wp--preset--spacing--60);
}
.ddh-menu__cabeza { position: absolute; inset-block-start: 14px; inset-inline-start: clamp(24px, 5vw, 64px); }
.ddh-menu ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ddh-rule); }
.ddh-menu li { border-bottom: 1px solid var(--ddh-rule); }
.ddh-menu li a {
  display: flex; align-items: center; justify-content: space-between; min-block-size: 56px;
  font-family: var(--wp--preset--font-family--display); font-size: clamp(1.375rem, 1rem + 2vw, 2rem); font-weight: 500;
  color: var(--ddh-ink); text-decoration: none;
}
.ddh-menu li a::after { content: "→"; font-family: var(--wp--preset--font-family--text); font-size: 1.125rem; color: var(--ddh-muted); }
.ddh-menu li a[aria-current="page"]::after { content: "·"; }
.ddh-menu__pie { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ddh-menu__pie .ddh-cta-cab { display: inline-flex; min-block-size: 52px; }
@media (prefers-reduced-motion: no-preference) {
  .ddh-menu[open] li { animation: ddh-entra-item var(--ddh-dur-state) var(--ddh-ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
}
@keyframes ddh-entra-item { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 1200px) { .ddh-menu { display: none !important; } }

/* ---------- 43. Movimiento v2 (DADR-08) ----------
   Regla: el estado por defecto es VISIBLE; la animación solo mejora. Todo vive
   dentro de @media screen + no-preference, así que ni la impresión ni quien
   pide menos movimiento dependen de ella. Solo transform, opacity, clip-path y
   stroke-dashoffset. Sin salida al desplazar: lo que se lee no se atenúa.

   E2 · Entrada de bloque · E3 · Escalonado (máx. 4, 60 px de desfase). */
/* H1 · filete de la cabecera: aparece cuando el contenido pasa por debajo.
   Es un indicador de estado, no contenido: puede ir ligado al desplazamiento. */
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .ddh-header::after { animation: ddh-aparecer linear both; animation-timeline: scroll(root block); animation-range: 0 72px; }
  }
}
@keyframes ddh-entra-bloque { from { opacity: 0; transform: translateY(16px); } }
@keyframes ddh-trazar-filete { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media screen and (prefers-reduced-motion: no-preference) {
  .wp-block-separator.is-style-ddh-mark.ddh-por-trazar { clip-path: inset(0 100% 0 0); }
  .wp-block-separator.is-style-ddh-mark.ddh-trazado { clip-path: inset(0 0 0 0); transition: clip-path 240ms var(--ddh-ease); }
}

/* E2 · E3 · Corrección 2.1.2: por TIEMPO, no ligadas al desplazamiento.
   Ligadas al desplazamiento, un bloque que el visitante dejaba quieto en la
   franja inferior se quedaba a medio aparecer, y una captura de página entera
   mostraba diagramas y textos a medias. Ahora ddh.js arma el estado de partida
   solo mientras se baja y solo fuera de pantalla; en reposo nada está oculto,
   ni dentro ni fuera de pantalla (ver ddh.js, bloque 2). */
.ddh-por-revelar { opacity: 0; transform: translateY(16px); }
.ddh-por-revelar.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--ddh-dur-in) var(--ddh-ease), transform var(--ddh-dur-in) var(--ddh-ease);
  transition-delay: calc(var(--i, 0) * 26ms); /* 3 × 26 + 320 ≈ 400 ms */
}
@media (prefers-reduced-motion: reduce) {
  .ddh-por-revelar { opacity: 1 !important; transform: none !important; }
}

/* E1 · Llegada a la portada (DADR-08, enmienda E1-v2). Secuencia por tiempo,
   en una carga real —entrada desde fuera del sitio o recarga—. Es el estado
   por defecto: el script de <head> solo lo apaga (html.ddh-sin-llegada) en una
   navegación interna y al terminar. No depende de JavaScript para verse.
     0 ms    el doble filete se traza ................. 240 ms
     60 ms   etiqueta (quién) ......................... 240 ms
     120 ms  «Estrategia para crecer.»  sube tras máscara  400 ms
     200 ms  «Inteligencia para decidir.» ............. 400 ms
     160 ms  el retrato se abre en círculo ............ 400 ms
     320 ms  entrada (qué y para quién), sin fundido ... 320 ms
     400 ms  botones (siguiente paso) ................. 320 ms   → fin ≈ 720 ms
   Relleno `backwards`: al terminar no queda nada aplicado (estado final =
   estático; solo difiere el antialias del borde del retrato, ≤ 7 px). Cada pieza ≤ 400 ms; la secuencia ≤ 800 ms. Solo transform, opacity y
   clip-path. El titular entra con máscara (clip-path), no con fundido: está
   completo y opaco al terminar. LCP medido antes y después: documento 02 §5
   (LCP = primera pintura; titular completo ≈ 600 ms después). Estado por defecto: todo visible. */
.ddh-frase { display: block; }
@media screen and (prefers-reduced-motion: no-preference) {
  html:not(.ddh-sin-llegada) .ddh-e1 > .wp-block-separator.is-style-ddh-mark { animation: ddh-e1-filete 240ms var(--ddh-ease) backwards; }
  html:not(.ddh-sin-llegada) .ddh-e1 > .is-style-ddh-label { animation: ddh-entra-item 240ms var(--ddh-ease) 60ms backwards; }
  html:not(.ddh-sin-llegada) .ddh-e1 .ddh-frase { animation: ddh-frase-sube 400ms var(--ddh-ease) 120ms backwards; }
  html:not(.ddh-sin-llegada) .ddh-e1 .ddh-frase + .ddh-frase { animation-delay: 200ms; }
  html:not(.ddh-sin-llegada) .ddh-e1 > .is-style-ddh-lead { animation: ddh-e1-sube var(--ddh-dur-in) var(--ddh-ease) 320ms backwards; }
  html:not(.ddh-sin-llegada) .ddh-e1 > .wp-block-buttons { animation: ddh-entra-bloque var(--ddh-dur-in) var(--ddh-ease) 400ms backwards; }
  /* El retrato solo se abre donde está en la primera pantalla junto al titular
     (≥ 782 px). En móvil queda bajo el pliegue y animarlo lo convertía en el
     elemento LCP (medido: 1.676 → 1.852 ms a 390 px). */
  @media (min-width: 782px) { html:not(.ddh-sin-llegada) .ddh-hero .ddh-retrato img { animation: ddh-retrato-abre 400ms var(--ddh-ease) 160ms backwards; } }
}
@keyframes ddh-frase-sube {
  from { clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
  to   { clip-path: inset(-.2em -.1em -.3em -.1em); transform: none; }
}
/* Nombre propio para el filete de E1: si compartiera nombre con el de E2
   (línea de tiempo view()), el navegador actualiza la animación existente en
   lugar de crear otra y el filete no se trazaba en la mitad de las cargas.
   La entrada sube sin fundido: es visible desde la primera pintura, así que el
   LCP mide un texto que de verdad se ve (con fundido, el LCP saltaba ~700 ms
   al terminar la animación). */
@keyframes ddh-e1-filete { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes ddh-e1-sube { from { transform: translateY(16px); } }
@keyframes ddh-retrato-abre { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(50% at 50% 50%); } }

/* P1 · Progreso de lectura: solo en entradas, 1 px de tinta (la línea azul→roja
   es de VIARTIFICIAL y no sale de su marco). */
.ddh-progreso {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60; block-size: 1px;
  background: var(--ddh-ink); transform-origin: left; transform: scaleX(0); pointer-events: none;
}
@media screen and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) {
    .ddh-progreso { animation: ddh-progresar linear both; animation-timeline: scroll(root block); }
  }
}
@supports not (animation-timeline: scroll()) { .ddh-progreso { display: none; } }
@media (prefers-reduced-motion: reduce) { .ddh-progreso { display: none; } }
@keyframes ddh-progresar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* T1–T4 · Transición entre páginas. El marco (cabecera) no se mueve; el
   contenido sale 140 ms hacia arriba y entra 320 ms desde abajo; volver atrás
   invierte el eje; el titular de la tarjeta pulsada viaja al h1 de destino. */
@view-transition { navigation: auto; }
.ddh-header { view-transition-name: ddh-cabecera; }
#ddh-main   { view-transition-name: ddh-contenido; }
::view-transition-old(ddh-cabecera), ::view-transition-new(ddh-cabecera) { animation: none; }
::view-transition-group(root) { animation-duration: 160ms; }
/* Sin transformación de tamaño en los grupos (anchura/altura por defecto del navegador). */
::view-transition-group(ddh-contenido), ::view-transition-group(ddh-cabecera) { animation-duration: 0s; }
@keyframes ddh-sale        { to   { opacity: 0; transform: translateY(-12px); } }
@keyframes ddh-entra       { from { opacity: 0; transform: translateY(16px); } }
@keyframes ddh-sale-atras  { to   { opacity: 0; transform: translateY(12px); } }
@keyframes ddh-entra-atras { from { opacity: 0; transform: translateY(-16px); } }
::view-transition-old(ddh-contenido) { animation: ddh-sale 140ms var(--ddh-ease-sale) both; }
::view-transition-new(ddh-contenido) { animation: ddh-entra 320ms var(--ddh-ease) 60ms both; }
html:active-view-transition-type(ddh-vuelve)::view-transition-old(ddh-contenido) { animation-name: ddh-sale-atras; }
html:active-view-transition-type(ddh-vuelve)::view-transition-new(ddh-contenido) { animation-name: ddh-entra-atras; }
::view-transition-group(ddh-indicador) { animation-duration: 320ms; animation-timing-function: var(--ddh-ease); }
::view-transition-group(ddh-titular)   { animation-duration: 360ms; animation-timing-function: var(--ddh-ease); }
::view-transition-old(ddh-titular) { animation-duration: 180ms; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---------- 44. Sistema gráfico (DADR-09) ----------
   Gramática derivada del monograma, sin redibujarlo: pesos 4 : 2 : 1, radios en
   serie 2:1 (24 · 48 · 96 · 192), arcos verdaderos, terminaciones cuadradas,
   cuadrado lleno = hecho, cuadrado hueco = pendiente, marco cuadrado = marca
   citada. Los SVG van en línea (inc/diagramas.php) para heredar las fuentes y
   los tokens del tema; hay versión de escritorio y versión móvil dibujada a 1:1. */
.ddh-dia { margin: 0; position: relative; }
.ddh-dia svg { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.ddh-dia__mov { display: none; }
@media (max-width: 781px) { .ddh-dia__esc { display: none; } .ddh-dia__mov { display: block; } }
.ddh-dia .t   { fill: none; stroke: var(--ddh-ink); stroke-width: var(--ddh-trazo); stroke-linecap: butt; stroke-linejoin: miter; }
.ddh-dia .m   { fill: none; stroke: var(--ddh-ink); stroke-width: var(--ddh-medio); stroke-linecap: butt; stroke-linejoin: miter; }
.ddh-dia .f   { fill: none; stroke: var(--ddh-surface-rule-em); stroke-width: var(--ddh-filete); stroke-linecap: butt; }
.ddh-dia .fi  { fill: none; stroke: var(--ddh-muted); stroke-width: var(--ddh-filete); stroke-linecap: butt; }
.ddh-dia .k   { fill: var(--ddh-ink); }
.ddh-dia .h   { fill: none; stroke: var(--ddh-ink); stroke-width: var(--ddh-medio); } /* marco de marca citada = medio trazo */
.ddh-dia .lab  { font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; fill: var(--ddh-muted); }
.ddh-dia .labi { font-family: var(--wp--preset--font-family--mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; fill: var(--ddh-ink); }
.ddh-dia .nom  { font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 21px; fill: var(--ddh-ink); }
.ddh-dia .nom-s{ font-family: var(--wp--preset--font-family--display); font-weight: 500; font-size: 17px; fill: var(--ddh-ink); }
.ddh-dia .txt  { font-family: var(--wp--preset--font-family--text); font-weight: 400; font-size: 14px; fill: var(--ddh-body); }

/* G1 · G2 · G3 · El diagrama se dibuja una vez, por tiempo, cuando asoma al
   bajar (ddh.js arma ddh-por-trazar FUERA de pantalla y reproduce ddh-trazado),
   de arriba abajo: cada trazo espera según su altura en el viewBox
   (--y0 / --vbh × 150 ms; con 400 ms un trazo inferior ya visible esperaba
   hasta 250 ms sin dibujar) y dura 400 ms. Secuencia ≤ 550 ms. Los TEXTOS y los NODOS no se animan: están siempre
   visibles. Si el visitante se detiene, nada queda a medias
   (corrección 2.1.2: con el dibujo ligado al desplazamiento, quedaba fijo a
   medio dibujar en la franja inferior y una captura lo mostraba roto). */
.ddh-dia__esc, .ddh-dia__mov { container-type: inline-size; }
@media screen and (prefers-reduced-motion: no-preference) {
  /* Por CLASE (.dib), no por atributo: [pathLength] no casa en SVG dentro de HTML
     (medido en 2.1.2: el trazo nunca se dibujaba). Los nodos (.k) son
     contenido —marcas de fase— y no se ocultan. */
  .ddh-dia.ddh-por-trazar .dib { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
  .ddh-dia.ddh-trazado .dib { stroke-dasharray: 1 1; stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--ddh-ease) calc(var(--y0, 0) / var(--vbh, 400) * 150ms); }
}
/* G3 · Estado: señalar una puerta deja en primer plano su ruta del diagrama. */
.ddh-ecosistema:has(.ddh-puerta--dato:is(:hover, :focus-within)) .ddh-dia [data-ruta]:not([data-ruta~="dato"]),
.ddh-ecosistema:has(.ddh-puerta--via:is(:hover, :focus-within)) .ddh-dia [data-ruta]:not([data-ruta~="via"]),
.ddh-ecosistema:has(.ddh-puerta--daniel:is(:hover, :focus-within)) .ddh-dia [data-ruta]:not([data-ruta~="daniel"]) { fill-opacity: .28; stroke-opacity: .28; }
/* Se atenúa con fill-opacity/stroke-opacity (no compite con la entrada, que
   usa opacity). Cambio de estado instantáneo: el catálogo no anima color. */

/* G0 · El monograma se traza. La geometría visible son los dos paths
   ORIGINALES; lo que se anima es la máscara (guía por la línea media de cada
   banda). Primero la capa exterior, después la interior, desplazada (Ley 2). */
.ddh-monograma { display: block; color: var(--ddh-ink); inline-size: 100%; max-inline-size: 240px; block-size: auto; }
.ddh-monograma__guia { fill: none; stroke: #fff; stroke-width: 112; stroke-linecap: butt; stroke-linejoin: miter; }
/* G0 retirado (2.1.2): el monograma es la marca y se muestra SIEMPRE completo.
   Una captura tomada mientras se trazaba lo mostraba a medias («una D»), y
   eso es mostrar la marca rota. Se conserva la máscara en el marcado, sin
   animación, por si Daniel decide recuperarlo. */

/* ---------- 45. Ecosistema y puertas (DADR-01, DADR-03) ----------
   Tres puertas por intención. Cada una dice qué marca lo resuelve y adónde
   lleva. Las de otra marca llevan su logotipo dentro de un marco negro (la
   cita); la de Daniel va sobre su superficie. Tarjeta-enlace (C3). */
.ddh-puertas { display: grid; gap: 16px; grid-template-columns: 1fr; margin-block-start: var(--wp--preset--spacing--60); }
/* 2.1.4: una columna por puerta (son dos desde que DatoMercado se fusionó en VIA; una en la página que la contiene). */
@media (min-width: 900px) { .ddh-puertas { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); } }
.ddh-puerta {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  border: 1px solid var(--ddh-surface-rule); background: var(--ddh-surface-card);
  padding: var(--wp--preset--spacing--60); color: var(--ddh-body); text-decoration: none;
  transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.ddh-puerta::before {
  content: ""; position: absolute; inset-inline: -1px; inset-block-start: -1px; block-size: 1px;
  background: var(--ddh-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.ddh-puerta:hover, .ddh-puerta:focus-visible { border-color: var(--ddh-surface-rule-em); transform: translateY(-2px); text-decoration: none; }
.ddh-puerta:hover::before, .ddh-puerta:focus-visible::before { transform: scaleX(1); }
.ddh-puerta__cita { background: var(--ddh-via); border: 1px solid #2E2E2E; padding: 16px 20px; display: flex; align-items: center; min-block-size: 88px; }
.ddh-puerta__cita img { display: block; block-size: auto; inline-size: 100%; max-inline-size: 240px; filter: none; }
/* Altura óptica (DADR-05: VIA ≥ Dato). Medido en los archivos: la altura de
   mayúscula es 6,55 % del ancho en VIA y 8,0 % en Dato; con Dato a 180 px y
   VIA llenando el marco (≥ 232 px), VIA queda ≥ 15 px y Dato en 14 px. */
.ddh-puerta__cita--dato img { max-inline-size: min(180px, 75%); }
/* 2.1.4: con dos puertas el marco mide ~565 px; el logotipo de VIA crece para no quedar perdido en el negro. */
.ddh-puerta--via .ddh-puerta__cita img { max-inline-size: min(360px, 100%); } /* VIA 240 px → 14,4 px de mayúscula (6,0 % del ancho del archivo del kit); Dato 180 px → 14,4 px (8,0 %). En marcos estrechos, Dato = 0,75 × VIA */
.ddh-puerta__propia { display: flex; align-items: center; min-block-size: 88px; padding: 16px 0; }
.ddh-puerta__propia svg { block-size: 40px; inline-size: auto; color: var(--ddh-ink); }
.ddh-puerta__q { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ddh-muted); margin: 0; }
.ddh-puerta__d { font-size: var(--wp--preset--font-size--small); margin: 0; }
.ddh-puerta__ir { margin-top: auto; display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px;
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ddh-ink); }
.ddh-puerta__ir span { display: inline-block; transition: transform var(--ddh-dur-state) var(--ddh-ease); }
.ddh-puerta:hover .ddh-puerta__ir span { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ddh-puerta, .ddh-puerta::before, .ddh-puerta__ir span { transition: none; } .ddh-puerta:hover { transform: none; } }

/* Marco de cita compacto: logotipo + un enlace (dentro solo la otra marca). */
.ddh-cita { background: var(--ddh-via); border: 1px solid #2E2E2E; padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 24px; }
.ddh-cita__logo { display: block; inline-size: 100%; block-size: auto; filter: none; }
.ddh-cita--via .ddh-cita__logo { max-inline-size: 520px; }
.ddh-cita a { align-self: flex-start; }
.ddh-respaldo { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: .14em; text-transform: uppercase; color: var(--ddh-muted); margin: 0; }

/* ---------- 46. Retrato ---------- */
.ddh-retrato { margin: 0; }
.ddh-retrato img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; filter: none; border-radius: 50%; }
.ddh-retrato--medio { max-width: 380px; }
@media (max-width: 781px) { .ddh-retrato { max-width: 160px; } }
/* EXCEPCIÓN registrada (decisión de Daniel, v1.5): el retrato va a color y en
   círculo. Es la ÚNICA exención de monocromo (CA-D2) y de radio 0 (Ley 3). */

/* ---------- 47. Pie ---------- */
@media (max-width: 781px) {
  /* Marca arriba; Navegar a la izquierda; Ecosistema y Contacto apilados a la
     derecha (la lista larga junto a las dos cortas: 124 px menos que en tres filas). */
  .ddh-footer .wp-block-columns { display: grid !important; grid-template-columns: 1fr 1fr; gap: 32px 24px;
    grid-template-areas: "marca marca" "nav eco" "nav con"; }
  .ddh-footer .wp-block-columns > .wp-block-column:nth-child(1) { grid-area: marca; }
  .ddh-footer .wp-block-columns > .wp-block-column:nth-child(2) { grid-area: nav; }
  .ddh-footer .wp-block-columns > .wp-block-column:nth-child(3) { grid-area: eco; }
  .ddh-footer .wp-block-columns > .wp-block-column:nth-child(4) { grid-area: con; }
}
.ddh-footer ul.is-style-ddh-ticks li > a:only-child { min-block-size: 44px; display: inline-flex; align-items: center; padding-inline-end: 8px; }
.ddh-footer nav ul { margin: 0; }

/* ---------- 48. Objetivos táctiles (CA-D7) ---------- */
ul.is-style-ddh-ticks li > a:only-child { display: inline-flex; align-items: center; min-block-size: 44px; }
ul.is-style-ddh-ticks li:has(> a:only-child)::before { top: 50%; }
ul.is-style-ddh-ticks li:has(> a:only-child) + li { margin-top: 0; }
.custom-logo-link { display: inline-flex; align-items: center; min-height: 44px; }


/* ---------- 49. Composición de la portada v2 (DADR-02) ----------
   Piezas nuevas: diagrama con su aire, monograma en la puerta propia, reparto
   por fase, credenciales, cierre de tres puertas y contacto por motivo. Todo
   con los tokens de superficie: funcionan sobre base y sobre banda. */
.ddh-marca--pie svg { block-size: 34px; }
.ddh-dia__pie { margin-block-start: 16px; font-size: var(--wp--preset--font-size--caption); color: var(--ddh-muted); }
.ddh-ecosistema__dia, .ddh-sistema__cadena, .ddh-sistema__metodo { margin-block-start: var(--wp--preset--spacing--70); }
.ddh-sistema__anillos { margin-block-start: var(--wp--preset--spacing--80) !important; align-items: center; }

.ddh-puerta__propia .ddh-monograma { inline-size: auto; block-size: 56px; max-inline-size: none; }
.ddh-sistema__mono { margin: 0; display: flex; flex-direction: column; gap: 16px; }
.ddh-sistema__mono .ddh-monograma { max-inline-size: 200px; }
@media (max-width: 781px) { .ddh-sistema__mono .ddh-monograma { max-inline-size: 120px; } }

/* Reparto por fase: qué marca entra en cada tramo del método. */
.ddh-reparto { display: grid; gap: 0; margin: var(--wp--preset--spacing--40) 0 0; border-top: 1px solid var(--ddh-surface-rule); }
@media (min-width: 900px) { .ddh-reparto { grid-template-columns: repeat(3, 1fr); } }
.ddh-reparto > div { padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) var(--wp--preset--spacing--50) 0; border-bottom: 1px solid var(--ddh-surface-rule); }
@media (min-width: 900px) {
  .ddh-reparto > div { border-bottom: 0; border-right: 1px solid var(--ddh-surface-rule); padding-inline-start: var(--wp--preset--spacing--50); }
  .ddh-reparto > div:first-child { padding-inline-start: 0; }
  .ddh-reparto > div:last-child { border-right: 0; }
}
.ddh-reparto dt { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.25; color: var(--ddh-ink); }
.ddh-reparto__f { display: block; margin-bottom: 8px; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: .16em; color: var(--ddh-muted); }
.ddh-reparto dd { margin: 12px 0 0; font-size: var(--wp--preset--font-size--small); color: var(--ddh-body); }

/* Credenciales: filas con filete, no contadores (DADR-08 retira los contadores). */
.ddh-credenciales { list-style: none; padding: 0; display: grid; gap: 0 var(--wp--preset--spacing--50); }
@media (min-width: 600px) { .ddh-credenciales { grid-template-columns: 1fr 1fr; } }
.ddh-credenciales li {
  border-top: 1px solid var(--ddh-surface-rule-em); padding: 14px 0 18px;
  font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label);
  font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--ddh-ink); line-height: 1.4;
}


/* Cierre de tres puertas (C3): tarjetas-enlace compactas. */
.ddh-cierre__puertas { list-style: none; padding: 0; margin: var(--wp--preset--spacing--60) 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.ddh-cierre__puertas a {
  position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 8px 16px;
  min-block-size: 44px; padding: var(--wp--preset--spacing--50) 0; border-top: 1px solid var(--ddh-surface-rule-em);
  color: var(--ddh-ink); text-decoration: none;
}
.ddh-cierre__puertas a::before {
  content: ""; position: absolute; inset-inline: 0; inset-block-start: -1px; block-size: 1px;
  background: var(--ddh-ink); transform: scaleX(0); transform-origin: left; transition: transform var(--ddh-dur-in) var(--ddh-ease);
}
.ddh-cierre__puertas a:hover::before, .ddh-cierre__puertas a:focus-visible::before { transform: scaleX(1); }
.ddh-cierre__q { grid-column: 1 / -1; font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--ddh-muted); }
.ddh-cierre__a { font-family: var(--wp--preset--font-family--display); font-size: var(--wp--preset--font-size--h-4); font-weight: 500; line-height: 1.25; }
.ddh-cierre__ir { font-size: 1.25rem; transition: transform var(--ddh-dur-state) var(--ddh-ease); }
.ddh-cierre__puertas a:hover .ddh-cierre__ir { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) { .ddh-cierre__puertas a::before, .ddh-cierre__ir { transition: none; } }

/* Contacto por motivo. La puerta elegida lleva borde de tinta y botón lleno. */
.ddh-contacto { display: grid; gap: 16px; }
@media (min-width: 1024px) { .ddh-contacto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); align-items: start; } }
.ddh-contacto__puerta { border: 1px solid var(--ddh-surface-rule); background: var(--ddh-surface-card); padding: var(--wp--preset--spacing--60); display: flex; flex-direction: column; gap: 16px; }
.ddh-contacto__puerta.is-elegida { border-color: var(--ddh-ink); }
.ddh-contacto__puerta > * { margin: 0; }
.ddh-contacto__marca { font-size: var(--wp--preset--font-size--h-3); }
.ddh-contacto__texto { font-size: var(--wp--preset--font-size--small); color: var(--ddh-body); }
.ddh-contacto__sel { color: var(--ddh-ink); }
.ddh-contacto__correo { font-family: var(--wp--preset--font-family--mono); font-size: var(--wp--preset--font-size--label); letter-spacing: .08em; color: var(--ddh-muted); }
.ddh-contacto__nota { font-size: var(--wp--preset--font-size--caption); color: var(--ddh-muted); }
.ddh-contacto .ddh-agenda { margin-top: 8px; }

/* Marca citada como enlace: el estado lo dice el filete del marco (neutro). */
a.ddh-cita--enlace { text-decoration: none; }
a.ddh-cita--enlace:hover, a.ddh-cita--enlace:focus-visible { border-color: #5A5A58; }
.ddh-cita + .ddh-respaldo { margin-top: 12px; }
figure.ddh-cita { margin: 0; }

/* CA-D7 · objetivos de 44 × 44 también en lo estrecho: el monograma de la
   cabecera en móvil y los enlaces de una palabra del pie. */
.ddh-marca { min-inline-size: 44px; justify-content: flex-start; }
ul.is-style-ddh-ticks li > a:only-child, .ddh-llink a, a.ddh-llink { min-inline-size: 44px; }
.ddh-contacto > * { min-inline-size: 0; }
.ddh-contacto__correo { overflow-wrap: anywhere; }

/* ---------- 50. Longitud en móvil (CA-D4 ≤ 10.000 px a 390) ----------
   Se compacta el aire y la disposición, no el contenido: ningún texto se
   oculta en móvil. */
@media (max-width: 781px) {
  .ddh-sistema__mono { flex-direction: row; align-items: center; gap: 20px; }
  .ddh-sistema__mono .ddh-monograma { inline-size: 64px; flex: none; }
  .ddh-sistema__anillos { margin-block-start: var(--wp--preset--spacing--60) !important; }
  .ddh-reparto > div { padding-block: 16px; }
  .ddh-reparto dd { margin-top: 8px; }
  .is-style-ddh-card, .ddh-puerta, .ddh-contacto__puerta { padding: 24px; }
  .ddh-puerta { gap: 12px; }
  .ddh-puerta__cita, .ddh-puerta__propia { min-block-size: 72px; padding-block: 12px; }
  .ddh-footer { padding-block: var(--wp--preset--spacing--70) var(--wp--preset--spacing--60); }
  .ddh-footer .wp-block-separator { margin-block: var(--wp--preset--spacing--60) var(--wp--preset--spacing--40) !important; }
  .ddh-footer .wp-block-group.is-layout-flex { gap: 8px 24px; }
}
/* En una fila flexible el margen automático empuja al vecino al otro extremo. */
.is-layout-flex > p.is-style-ddh-pending, .is-layout-flex > p.is-style-ddh-lead, .is-layout-flex > .ddh-measure { margin-right: 0; }
.ddh-sistema__mono figcaption { font-size: var(--wp--preset--font-size--caption); color: var(--ddh-muted); max-width: 32ch; }
/* Dos secciones seguidas sobre la misma superficie: un filete las separa
   (DADR-07: el cambio de sección se ve por superficie o por filete, nunca por un hueco solo). */
.ddh-seccion:not(.is-style-ddh-band) + .ddh-seccion:not(.is-style-ddh-band) { border-top: 1px solid var(--ddh-rule); }
/* Agenda dentro de la puerta 3 del contacto: plana (sin tarjeta dentro de
   tarjeta) y, al abrirse el calendario, la puerta ocupa todo el ancho. */
.ddh-contacto .ddh-agenda { margin: 8px 0 0; }
.ddh-contacto .ddh-agenda__portada { border: 0; border-top: 1px solid var(--ddh-surface-rule); background: transparent; padding: 24px 0 0; }
.ddh-contacto .ddh-agenda__titulo { font-size: var(--wp--preset--font-size--h-4); }
.ddh-contacto .ddh-agenda__ficha li { grid-template-columns: 1fr; gap: 4px; }
.ddh-contacto__puerta:has(.ddh-agenda.is-abierta) { grid-column: 1 / -1; }
/* La entrada de página ya trae su aire: la primera sección no suma el suyo. */
.ddh-intro + .ddh-seccion:not(.is-style-ddh-band) { padding-top: 0 !important; }
.ddh-deflist th, .ddh-deflist td { vertical-align: top; }

/* ---------- 51. Movimiento reducido: sin desplazamientos de estado ----------
   Con la preferencia activa, los estados cambian sin transición y nada se
   eleva ni se desplaza (medido en v2.0-rc: la tarjeta subía 2 px en 320 ms). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; transition-delay: 0s !important; }
  .is-style-ddh-card:hover, .is-style-ddh-card:has(a):hover, a.is-style-ddh-card:hover,
  .ddh-puerta:hover, .ddh-puerta:focus-visible, .wp-block-button__link:active, .ddh-agenda__abrir:active,
  .ddh-cierre__puertas a:hover .ddh-cierre__ir, .ddh-puerta:hover .ddh-puerta__ir span,
  .wp-block-button__link:hover::after, .wp-block-button__link:focus-visible::after { transform: none !important; }
}
/* Menú en pantallas bajas (móvil en horizontal, zoom 400 %): la cabeza entra en
   el flujo y la lista no se monta sobre el monograma. */
@media (max-height: 500px) {
  .ddh-menu__cabeza { position: static; }
  .ddh-menu__caja { justify-content: flex-start; }
}
.ddh-agenda__aviso { overflow-wrap: anywhere; }
/* Mismo límite óptico en todos los anchos: Dato ≤ 0,75 × VIA (6,0 % frente a 8,0 %). */
.ddh-cita--dato .ddh-cita__logo { max-inline-size: min(300px, 75%); }
.ddh-reparto dd.ddh-reparto__ir { display: flex; flex-wrap: wrap; gap: 0 20px; margin-top: 4px; }
/* Mono tiene una sola cara (500): se declara para no sintetizar. */
.ddh-contacto__correo, .ddh-agenda__aviso, .ddh-agenda__ficha li span { font-weight: 500; }
.ddh-quien a.ddh-llink { margin-inline-end: 20px; }
/* Menú en pantalla baja: todo, cierre incluido, cabe sin desplazar desde 360 px de alto. */
@media (max-height: 500px) {
  .ddh-menu__caja { gap: 12px; padding-block: 12px; }
  .ddh-menu li a { min-block-size: 44px; font-size: 1.25rem; }
}

/* ---------- 52. Firmas de las marcas citadas (corrección 2.1.1) ----------
   Dentro de su marco cada marca conserva su identidad, como en la v1.12:
   - VIARTIFICIAL: su línea de firma #0066B1 → #1C69D4 → #E22718 en el borde
     superior del marco, y su logotipo tal como viene en el kit (sin recortes).
   - DatoMercado: su azul #0061FE en el borde superior del marco.
   La instrucción de Daniel fue quitar el coral y el azul de DatoMercado FUERA
   de su marco; dentro del marco, el color es de la otra marca y no se toca. */
.ddh-cita, .ddh-puerta__cita, .is-style-ddh-via-frame { position: relative; }
.ddh-cita--via::before, .ddh-puerta__cita:not(.ddh-puerta__cita--dato)::before, .is-style-ddh-via-frame::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: min(430px, 46%); height: 2px;
  background: linear-gradient(90deg, var(--ddh-via-1) 0%, var(--ddh-via-2) 58%, var(--ddh-via-3) 100%);
}
.ddh-cita--dato::before, .ddh-puerta__cita--dato::before {
  content: ""; position: absolute; top: -1px; left: -1px; width: min(430px, 46%); height: 2px;
  background: var(--ddh-dm);
}

/* Impresión: todo trazado y visible, pase lo que pase con ddh.js. */
@media print {
  .ddh-por-revelar { opacity: 1 !important; transform: none !important; }
  .ddh-por-trazar, .ddh-por-trazar * { opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; clip-path: none !important; }
}