/* ==========================================================================
   components.css — componentes reutilizables con la capa de identidad Gramax
   ========================================================================== */

/* --------------------------------------------------------------------------
   Botones (§8): alto ≥ 44px, hover con leve elevación
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: 0.78em 1.4em;
  border-radius: var(--r-pill);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.1;
  text-align: center;
  letter-spacing: -0.01em;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out);
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--cyan);
  color: var(--white);
  box-shadow: var(--shadow-cyan);
}
.btn--primary:hover { background: #00a0d2; box-shadow: 0 18px 36px rgba(0,175,229,0.3); }

.btn--ink {
  background: var(--ink);
  color: var(--bg);
  box-shadow: var(--shadow-md);
}
.btn--ink:hover { background: #111; }

.btn--outline {
  background: transparent;
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--ink);
}
.btn--outline:hover { background: var(--ink); color: var(--bg); }

.btn--ghost { background: transparent; color: var(--cyan-ink); }
.btn--ghost:hover { background: var(--cyan-bg); }

/* Botón sobre fondo tinta */
.bg-ink .btn--outline { color: var(--bg); box-shadow: inset 0 0 0 2px rgba(247,249,252,0.5); }
.bg-ink .btn--outline:hover { background: var(--bg); color: var(--ink); box-shadow: inset 0 0 0 2px var(--bg); }

.btn--lg { font-size: var(--fs-lead); padding: 0.85em 1.7em; }
.btn--block { display: flex; width: 100%; }

.btn .icon { width: 1.1em; height: 1.1em; flex: none; }

/* Enlace con flecha que se desliza */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--fw-bold);
  color: var(--cyan-ink);
}
.link-arrow .arrow { transition: transform var(--dur) var(--ease-out); }
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover .arrow { transform: translateX(4px); }

/* --------------------------------------------------------------------------
   Cards (§8): padding generoso, bordes suaves, fondo surface
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: clamp(1.4rem, 1rem + 1.5vw, 2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  height: 100%;
}
.card--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--ink-soft); }

/* Nota / sticker de papel (§7: cajas como stickers) */
.sticker {
  position: relative;
  background-color: var(--bg);
  background-image: var(--paper-white);
  background-repeat: repeat; /* textura en tamaño natural, sin estirar */
  border-radius: var(--r-md);
  padding: clamp(1.2rem, 1rem + 1vw, 1.8rem);
  box-shadow: var(--shadow-md);
  transform: rotate(-1deg);
  border: 1px solid var(--line);
}
.sticker:nth-child(even) { transform: rotate(1.2deg); }
.sticker h3 { margin-bottom: var(--sp-2); font-size: var(--fs-h3); }
.sticker p { color: var(--ink-soft); margin: 0; }
/* Cinta adhesiva arriba del sticker */
.sticker::before {
  content: "";
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-2deg);
  width: 84px; height: 22px;
  background: rgba(255, 219, 0, 0.55);
  border: 1px solid rgba(138,107,0,0.18);
  border-radius: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sticker, .sticker:nth-child(even) { transform: none; }
}

/* --------------------------------------------------------------------------
   Badges / chips
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: var(--fs-small);
  font-weight: var(--fw-bold);
  padding: 0.32em 0.85em;
  border-radius: var(--r-pill);
  background: var(--cyan-bg);
  color: var(--cyan-ink);
  letter-spacing: 0.01em;
}
.chip--yellow { background: var(--yellow); color: var(--ink); }
.chip--ink { background: var(--ink); color: var(--bg); }
.chip--soft { background: var(--bg-soft); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Recursos de firma (§5)
   -------------------------------------------------------------------------- */

/* Motivos de collage (§5.3): cerebro, lámpara, mano, mate, megáfono */
.motif {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}
.motif img { width: 100%; height: auto; }

/* Trazos a mano (§5.2): flechas, círculo, tick. Filled SVG → animados por wipe */
.stroke {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 1;
}
.stroke img { width: 100%; height: auto; }

/* Trazos tintados con CSS mask (cuando se quiere cian/amarillo en vez de negro) */
.stroke--cyan img,
.stroke--yellow img,
.stroke--ink img {
  width: 100%; height: 100%;
}
.stroke--tint {
  /* contenedor que usa la imagen como máscara y pinta con background */
}
.stroke--tint .tintable {
  width: 100%; height: 100%;
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
}
.tintable.is-cyan { background: var(--cyan); }
.tintable.is-yellow { background: var(--yellow); }
.tintable.is-ink { background: var(--ink); }

/* Recortes de personas byn sobre forma de color (§5.1) */
.cutout {
  position: relative;
  display: inline-block;
}
.cutout__shape {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  z-index: 0;
}
.cutout__img {
  position: relative;
  z-index: 1;
  filter: grayscale(100%) contrast(1.05);
}

/* --------------------------------------------------------------------------
   Franja de logos igualados por altura (partners y servicios, §9)
   -------------------------------------------------------------------------- */
.logo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 1rem + 2vw, 3rem);
}
.logo-row img {
  height: 34px;       /* igualar por altura, ancho libre */
  width: auto;
}
.logo-row a { display: inline-flex; align-items: center; }
@media (min-width: 720px) { .logo-row img { height: 40px; } }

/* --------------------------------------------------------------------------
   Formularios (§8): amplios, labels visibles, táctiles
   -------------------------------------------------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label { font-weight: var(--fw-bold); font-size: var(--fs-small); }
.input {
  min-height: var(--tap);
  padding: 0.7em 1em;
  border-radius: var(--r-md);
  border: 2px solid var(--line-strong);
  background: var(--white);
  color: var(--ink);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.input::placeholder { color: #98A2B3; }
.input:focus {
  outline: none;
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px var(--cyan-bg);
}
.input--invalid { border-color: var(--error); }
.form-msg { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.form-msg--ok { color: var(--success); }
.form-msg--err { color: var(--error); }

/* honeypot anti-bots: fuera de pantalla, invisible para humanos */
.hp {
  position: absolute !important;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp (global)
   -------------------------------------------------------------------------- */
a.wa-float {
  position: fixed;
  right: clamp(1rem, 2vw, 1.5rem);
  bottom: clamp(1rem, 2vw, 1.5rem);
  z-index: 80;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; /* verde WhatsApp: utilitario, reconocible */
  color: #fff; /* a.wa-float para ganarle a a:not(.btn); el ícono usa currentColor */
  border-radius: 50%;
  box-shadow: 0 10px 24px rgba(37, 211, 102, 0.45), var(--shadow-md);
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.wa-float:hover { transform: translateY(-3px) scale(1.04); }
.wa-float .icon { width: 30px; height: 30px; }
@media (min-width: 720px) {
  .wa-float { width: 60px; height: 60px; }
  .wa-float .icon { width: 32px; height: 32px; }
}
/* anillo de pulso sutil para llamar la atención */
.wa-float::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: wa-pulse 2.6s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  70%  { transform: scale(1.7); opacity: 0; }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .wa-float::before { animation: none; display: none; }
}