/* ==========================================================================
   HOVER LOOP + BUTTONS
   Markup:  <a class="btn btn--black hover-loop">
              <span class="hover-loop__inner">Label</span>
            </a>
   js/modules/hover-loop.js clones .hover-loop__inner so the label rolls out
   and an identical copy rolls in. The animation also plays when a parent
   link/button is hovered, so a whole card can drive the button inside it.
   ========================================================================== */

.hover-loop {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
}

.hover-loop__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  transition: transform .32s var(--ease-in-out-cubic);
}

.hover-loop__inner--clone {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
}

.hover-loop--right > .hover-loop__inner--clone { transform: translateX(-100%); }
.hover-loop--up-right > .hover-loop__inner--clone { transform: translate(-100%, 100%); }

@media (hover: hover) {
  .hover-loop:is(:hover, a:hover *, button:hover *) > .hover-loop__inner { transform: translateY(-100%); }
  .hover-loop--right:is(:hover, a:hover *, button:hover *) > .hover-loop__inner { transform: translateX(100%); }
  .hover-loop--up-right:is(:hover, a:hover *, button:hover *) > .hover-loop__inner { transform: translate(100%, -100%); }
  .hover-loop:is(:hover, a:hover *, button:hover *) > .hover-loop__inner--clone { transform: none; }
}

.hover-loop:focus-visible > .hover-loop__inner { transform: translateY(-100%); }
.hover-loop:focus-visible > .hover-loop__inner--clone { transform: none; }

/* --------------------------------------------------------------------------
   Button (.btn)
   Variants: --black · --accent · --white · --outline · --text
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--ink-950);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--ink-800);
  --btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: fit-content;
  height: 4.8rem;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-body);
  font-size: var(--text-small);
  font-weight: var(--fw-medium);
  letter-spacing: calc(-.01em + var(--tracking-body));
  line-height: 1.25;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--duration-base) ease,
    color var(--duration-base) ease,
    border-color var(--duration-base) ease,
    transform var(--duration-fast) ease;
}

.btn:active {
  transform: translateY(1px);
}

.btn > .hover-loop__inner {
  gap: var(--space-2);
  padding-inline: 2.2rem;
}

.btn .icon {
  width: 1.6rem;
  height: 1.6rem;
}

.btn--small {
  height: 4rem;
  font-size: var(--text-xs);
}

.btn--small > .hover-loop__inner {
  padding-inline: 1.8rem;
}

.btn--large {
  height: 5.6rem;
  font-size: var(--text-body);
}

.btn--large > .hover-loop__inner {
  padding-inline: 2.8rem;
}

.btn--block {
  width: 100%;
}

.btn--black   { --btn-bg: var(--ink-950); --btn-fg: var(--white); --btn-bg-hover: var(--ink-700); }
.btn--accent  { --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent); --btn-bg-hover: var(--color-accent-hover); }
.btn--white   { --btn-bg: var(--white); --btn-fg: var(--ink-950); --btn-bg-hover: var(--ink-100); }
.btn--outline { --btn-bg: transparent; --btn-fg: var(--color1, var(--ink-950)); --btn-bg-hover: transparent; --btn-border: var(--line); }
.btn--text    { --btn-bg: transparent; --btn-fg: inherit; --btn-bg-hover: transparent; height: auto; border: 0; border-radius: 0; }
.btn--text > .hover-loop__inner { padding-inline: 0; }

@media (hover: hover) {
  .btn:is(:hover, a:hover *, button:hover *) {
    background: var(--btn-bg-hover);
  }

  .btn--outline:is(:hover, a:hover *, button:hover *) {
    border-color: currentColor;
  }
}

@media (max-width: 767px) {
  .btn > .hover-loop__inner {
    padding-inline: 1.8rem;
  }

  .btn--small {
    font-size: var(--text-small);
  }
}

/* --------------------------------------------------------------------------
   Square icon button (.btn-square)
   -------------------------------------------------------------------------- */
.btn-square {
  --size: 4.8rem;
  --btn-bg: var(--ink-950);
  --btn-fg: var(--white);
  --btn-bg-hover: var(--ink-700);
  --btn-border: transparent;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: var(--size);
  height: var(--size);
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-sm);
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease, border-color var(--duration-base) ease, opacity var(--duration-base) ease;
}

.btn-square > .hover-loop__inner {
  width: 100%;
}

.btn-square .icon {
  width: 1.8rem;
  height: 1.8rem;
}

.btn-square--medium { --size: 4rem; }

.btn-square.btn--black   { --btn-bg: var(--ink-950); --btn-fg: var(--white); --btn-bg-hover: var(--ink-700); }
.btn-square.btn--accent  { --btn-bg: var(--color-accent); --btn-fg: var(--color-on-accent); --btn-bg-hover: var(--color-accent-hover); }
.btn-square.btn--white   { --btn-bg: var(--white); --btn-fg: var(--ink-950); --btn-bg-hover: var(--ink-100); }
.btn-square.btn--outline { --btn-bg: transparent; --btn-fg: currentColor; --btn-bg-hover: transparent; --btn-border: var(--line); }

@media (hover: hover) {
  .btn-square:is(:hover, a:hover *, button:hover *) {
    background: var(--btn-bg-hover);
  }

  .btn-square.btn--outline:is(:hover, a:hover *, button:hover *) {
    border-color: currentColor;
  }
}

/* ==========================================================================
   CONTACT LINK — WhatsApp / e-mail (header menu, footer, /contacto)
   Icon chip + label + value, in the Nexoss palette (never WhatsApp green).
   Follows the section theme through --line / --bg2 / --color1 / --muted.
     <a class="contact-link" href="…">
       <span class="contact-link__icon"><svg class="icon">…</svg></span>
       <span class="contact-link__body"><span class="contact-link__label">WhatsApp</span>
       <span class="contact-link__value">317 237 4855</span></span></a>
   ========================================================================== */
.contact-links {
  display: grid;
  gap: var(--space-2);
}

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 100%;
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--color1);
  transition: border-color var(--duration-base) ease;
}

.contact-link__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: var(--radius-xs);
  background: var(--bg2);
  color: var(--color1);
  transition: background-color var(--duration-base) ease, color var(--duration-base) ease;
}

.contact-link__icon .icon {
  width: 2rem;
  height: 2rem;
}

.contact-link__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.contact-link__label {
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  line-height: 1.25;
}

.contact-link__value {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  letter-spacing: var(--tracking-mono);
  line-height: 1.4;
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .contact-link:hover {
    border-color: var(--color1);
  }

  .contact-link:hover .contact-link__icon {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
}

.contact-link:focus-visible .contact-link__icon {
  background: var(--color-accent);
  color: var(--color-on-accent);
}