/* Sydak Living — utilidades del contrato (§9.2). */

.u-eyebrow {
  display: block;
  font-family: var(--ff-display);
  font-size: var(--fs-overline);
  font-weight: 500;
  line-height: 1.4;
  text-transform: uppercase;
  letter-spacing: var(--ls-caps-4);
  color: var(--div-accent-strong);
}

.u-measure {
  max-width: var(--container-text);
}

.u-visually-hidden,
.u-visually-hidden-focusable:not(:focus):not(:focus-within),
.c-skip-link:not(:focus):not(:focus-within) {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ——— Skip link (§8): oculto hasta recibir foco ——— */

.c-skip-link {
  position: absolute;
  inset-block-start: var(--space-2);
  inset-inline-start: var(--space-2);
  z-index: 200;
  display: inline-block;
  padding: var(--space-3) var(--space-5);
  background: var(--div-surface);
  color: var(--div-ink);
  border: 1px solid var(--div-line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-2);
  font-family: var(--ff-display);
  font-size: var(--fs-small);
  text-decoration: none;
}

/* ——— Icono inline: el partial icon.html.twig expone --icon-size ——— */

.c-icon {
  display: inline-flex;
  flex: none;
}

.c-icon svg {
  width: var(--icon-size, 24px);
  height: var(--icon-size, 24px);
}

/* ——— Reveal al entrar en viewport (§5, §9.1) ———
   [data-reveal] es inerte en CSS: solo el JS añade .will-reveal, así sin JS
   nada queda oculto. El stagger se fija desde JS con --reveal-delay. */

.will-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}

.will-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .will-reveal,
  .will-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }
}