/* ==========================================================================
   MOXIFY · COMPONENTES
   Botones, tarjetas, stickers, iconos, etiquetas y marca.
   Todo esto sale del design system de Moxify, pasado a CSS puro.
   ========================================================================== */

/* ---------------------------------------------------------------
   Botón
   Uso: <a class="btn btn--primario btn--lg" href="#">Texto</a>
   Modificadores: --primario --oscuro --claro --outline --ghost
                  --sm --md --lg --ancho
   Flecha: añadir <span class="btn__flecha">…svg…</span> dentro
   --------------------------------------------------------------- */

.btn {
  --btn-h:  var(--control-h-md);
  --btn-px: var(--control-px-md);
  --btn-fs: 14px;
  --btn-gap: 12px;
  --btn-dot: 28px;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--btn-gap);
  height: var(--btn-h);
  padding-inline: var(--btn-px);
  font-family: var(--font-body);
  font-size: var(--btn-fs);
  font-weight: 700;
  letter-spacing: var(--ls-button);
  text-transform: uppercase;
  white-space: nowrap;
  border: 2px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-control);
  -webkit-tap-highlight-color: transparent;
}

.btn:has(.btn__flecha) { padding-right: 6px; }

.btn:hover  { transform: var(--hover-lift); }
.btn:active { transform: var(--press-scale); }

/* Brillo diagonal que cruza el botón al pasar el mouse */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform var(--dur-slow) var(--ease-out);
  pointer-events: none;
}

.btn:hover::after { transform: translateX(120%); }

/* Tamaños */
.btn--sm { --btn-h: var(--control-h-sm); --btn-px: var(--control-px-sm); --btn-fs: 12px; --btn-gap: 8px;  --btn-dot: 22px; }
.btn--lg { --btn-h: var(--control-h-lg); --btn-px: var(--control-px-lg); --btn-fs: 16px; --btn-gap: 14px; --btn-dot: 34px; }
.btn--ancho { width: 100%; }

/* Variantes */
.btn--primario {
  background: var(--red-500);
  color: var(--paper-100);
  box-shadow: var(--shadow-glow-red);
}
.btn--primario:hover { background: var(--red-600); }
.btn--primario:active { background: var(--red-700); }

.btn--oscuro { background: var(--ink-900); color: var(--paper-100); }
.btn--oscuro:hover { background: var(--ink-700); }

.btn--claro { background: var(--paper-100); color: var(--ink-900); }
.btn--claro:hover { background: var(--paper-300); }

/* Outline: se invierte al pasar el mouse (blanco sólido, texto negro) */
.btn--outline {
  background: transparent;
  color: var(--paper-100);
  border-color: var(--paper-100);
}
.btn--outline:hover {
  background: var(--paper-100);
  color: var(--ink-900);
}
.btn--outline:hover .btn__flecha { background: var(--red-500); color: var(--paper-100); }

.btn--ghost { background: transparent; color: var(--paper-100); }
.btn--ghost:hover { background: rgba(255, 255, 255, .1); }

/* Outline sobre fondo rojo o blanco */
.btn--outline-oscuro {
  background: transparent;
  color: var(--ink-900);
  border-color: var(--ink-900);
}
.btn--outline-oscuro:hover { background: var(--ink-900); color: var(--paper-100); }

.btn[disabled],
.btn--desactivado {
  background: var(--ink-700);
  color: var(--ink-400);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}

/* Punto con flecha */
.btn__flecha {
  width: var(--btn-dot);
  height: var(--btn-dot);
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--paper-100);
  color: var(--red-500);
  transition: transform var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}

.btn__flecha svg { width: 50%; height: 50%; }

.btn:hover .btn__flecha { transform: translateX(3px); }

.btn--outline .btn__flecha,
.btn--ghost .btn__flecha,
.btn--outline-oscuro .btn__flecha { background: var(--red-500); color: var(--paper-100); }

.btn--claro .btn__flecha,
.btn--oscuro .btn__flecha { background: var(--red-500); color: var(--paper-100); }


/* ---------------------------------------------------------------
   Tarjeta
   --------------------------------------------------------------- */

.card {
  position: relative;
  background: var(--surface-card);
  color: var(--text-body);
  padding: var(--space-6);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sticker);
  transition: transform var(--dur-base) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.card--borde { border: 1px solid var(--border-hairline); }

.card--interactiva { cursor: default; }

.card--interactiva:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-sticker-lift), 0 0 0 1px rgba(232, 16, 16, .35);
}

/* Halo rojo que sigue al cursor dentro de la tarjeta (lo mueve main.js) */
.card--brillo::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    340px circle at var(--mx, 50%) var(--my, 0%),
    rgba(232, 16, 16, .18),
    transparent 70%
  );
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

.card--brillo:hover::before { opacity: 1; }


/* ---------------------------------------------------------------
   Sticker de dato (los tres del hero)
   --------------------------------------------------------------- */

.sticker {
  display: inline-block;
  padding: 16px 28px 14px;
  background: var(--paper-100);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sticker);
  transition: transform var(--dur-base) var(--ease-snap),
              box-shadow var(--dur-base) var(--ease-out);
}

.sticker--a { transform: rotate(var(--tilt-a)); }
.sticker--b { transform: rotate(var(--tilt-b)); }
.sticker--c { transform: rotate(var(--tilt-c)); }

.sticker:hover {
  transform: rotate(0deg) translateY(-4px) scale(1.03);
  box-shadow: var(--shadow-sticker-lift);
}

.sticker__valor {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(30px, 3.2vw, 46px);
  line-height: .9;
  letter-spacing: var(--ls-display);
  color: var(--red-500);
  text-transform: uppercase;
}

.sticker__label {
  margin-top: 6px;
  max-width: 20ch;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ink-400);
}


/* ---------------------------------------------------------------
   Iconos
   --------------------------------------------------------------- */

.ico {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ico--relleno { fill: currentColor; stroke: none; }

/* Cuadrado rojo con icono dentro (tarjetas de servicio) */
.ico-caja {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: var(--red-500);
  color: var(--paper-100);
  box-shadow: 0 8px 20px rgba(232, 16, 16, .28);
  transition: transform var(--dur-base) var(--ease-snap),
              background-color var(--dur-base) var(--ease-out);
}

.ico-caja .ico { width: 28px; height: 28px; }

.card--interactiva:hover .ico-caja { transform: rotate(-8deg) scale(1.08); }

/* Círculo negro con icono (sección "tipos de proyectos") */
.ico-circulo {
  width: 76px;
  height: 76px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ink-900);
  color: var(--paper-100);
  transition: background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-snap);
}

.ico-circulo .ico { width: 30px; height: 30px; }


/* ---------------------------------------------------------------
   Etiquetas
   --------------------------------------------------------------- */

.etiqueta {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 11px;
  background: var(--red-500);
  color: var(--paper-100);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: var(--radius-pill);
}

.etiqueta--fantasma {
  background: transparent;
  border: 1px solid var(--border-soft);
  color: var(--text-muted);
}


/* ---------------------------------------------------------------
   Marca (logo + wordmark)
   --------------------------------------------------------------- */

.marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: var(--paper-100);
}

.marca__logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: transform var(--dur-base) var(--ease-snap);
}

.marca:hover .marca__logo { transform: rotate(-8deg) scale(1.06); }

.marca__texto {
  font-family: var(--font-display);
  font-size: 23px;
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.marca__texto span { color: var(--red-500); }

.marca--grande .marca__logo { width: 56px; height: 56px; }
.marca--grande .marca__texto { font-size: 28px; }