/* ==========================================================================
   Make Flow IA — site.css
   Utilidades de layout de página que tokens.css no cubre. Nada más.
   Reglas: solo tokens y calc(); ningún hex, px ni ms literal; eje vertical en
   múltiplos de 8; hairlines compensados con calc(var(--space-N) - var(--line)).
   Todo componente visual (botones, celdas, tablas, timeline, formulario, etc.)
   vive en tokens.css y no se redefine aquí.
   ========================================================================== */

/* 1. .c-block — bloque de servicio (Servicios, FASE-7 §4.2) o de etapa
      (Metodología, §4.5): «separación entre bloques 64 con border-top hairline».
      Se usa en article/section dentro de un .wrap; el primero del grupo no lleva
      regla ni separación porque la cabecera de sección ya lo separa. */
.c-block { border-top: var(--border); padding-top: calc(var(--space-8) - var(--line)); margin-top: var(--space-8); }
.c-block:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

/* 2. .c-principle--list — variante de la caja de principio (§4.5, fila 13
      «Principios»): caja enmarcada a todo el ancho que contiene un ol.c-steps.
      Anula el techo de 620 px y el margen superior de .c-principle, que en esta
      posición aporta la cabecera de sección. */
.c-principle--list { max-width: none; margin-top: 0; }
.c-principle--list .c-steps li:first-child { border-top: 0; padding-top: 0; }

/* 3. .c-acc__body h3 — encabezados de columna del acordeón (§3.17).
      FASE-7 §3.17 los describe como «h4 en estilo Kicker», pero §4.2 fija el
      título de cada bloque de servicio en h2: con h4 la jerarquía saltaba de h2
      a h4 en los siete bloques de Servicios, contra §5.16 («un h1 por página»,
      semántica de documento) y contra el propio uso de h3 en el resto de la
      página («Plazos y lo que pone su equipo», «Cómo se paga»…).
      Se corrige la etiqueta a h3 y se repite aquí el estilo de §3.17 para que
      el render sea idéntico al de tokens.css .c-acc__body h4. Si el arquitecto
      prefiere volver a h4, se borra esta regla y se revierte el HTML. */
.c-acc__body h3 { font: 600 var(--text-kicker) / var(--lh-kicker) var(--font-heading);
  text-transform: uppercase; letter-spacing: var(--track-kicker); color: var(--color-ink-3); margin-bottom: var(--space-2); }

/* 4. .c-prose — cuerpo de las páginas legales (§4.7): texto a 60ch, h2
      numerados («1 · Responsable») separados 48 y párrafos separados 16.
      No aplica a ninguna otra página. */
.c-prose { max-width: var(--measure); }
.c-prose h2 { margin-top: var(--space-7); }
.c-prose h2 + p, .c-prose p + p { margin-top: var(--space-4); }
.c-prose ul, .c-prose ol { margin-top: var(--space-4); }

/* Aviso de envío correcto del formulario de contacto.
   El formulario redirige a /contacto/#enviado; el aviso aparece solo entonces,
   porque lo revela el selector :target. Sin JavaScript. Mientras la dirección no
   apunte a él, permanece oculto para todo el mundo, también para un lector de
   pantalla, que es lo correcto: todavía no ha pasado nada que anunciar. */
#enviado { display: none; }
/* :target es el respaldo sin JavaScript; .esta-visible lo pone el guion del pie,
   que además limpia «#enviado» de la dirección para que no reaparezca al recargar. */
#enviado:target,
#enviado.esta-visible { display: block; margin-bottom: var(--space-6); }
/* Aire por encima cuando la vista se coloca sobre el aviso, para que no quede
   pegado al borde superior de la pantalla. */
#enviado { scroll-margin-top: var(--space-6); }
#formulario { scroll-margin-top: var(--space-6); }
/* Retirada sin desvanecido: FASE-7 §5.3 no admite más transición que la de color,
   y esta regla no se debilita por un adorno. El aviso se retira de una vez, y el
   guion del pie compensa el desplazamiento para que nada se mueva bajo la vista. */
.c-notice--exito { border-color: var(--color-accent); }
.c-notice--exito .c-notice__title { color: var(--color-accent-text); }

/* Volver arriba, en el pie. Es un enlace corriente al ancla de la cabecera:
   funciona sin JavaScript y el salto es inmediato. La flecha va aparte para
   poder separarla del texto sin tocar el interlineado del resto de enlaces. */
.c-footer__arriba { white-space: nowrap; }
.c-footer__flecha { margin-left: .4em; }