/* ============================================================
   components.css — Componentes reutilizables (identidad oficial)
   ============================================================ */

/* ---- Símbolo Amazing World: 4 módulos (radio 16%) ----
   Orden oficial: Coral · Verde Menta · Azul Profundo · Morado.
   No inventar logo; reproduce el símbolo definido en la guía. */
.mark{display:inline-grid;grid-template-columns:1fr 1fr;gap:14%;width:30px;height:30px;flex:0 0 auto}
.mark span{display:block;border-radius:var(--radius-mod)}
.mark span:nth-child(1){background:var(--aw-coral)}
.mark span:nth-child(2){background:var(--aw-mint)}
.mark span:nth-child(3){background:var(--aw-blue)}
.mark span:nth-child(4){background:var(--aw-purple)}
.mark--lg{width:72px;height:72px;gap:12%}

/* Wordmark */
.wordmark{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:var(--weight-bold);
  font-size:var(--text-lg);letter-spacing:var(--tracking-tight);color:var(--ink);
}

/* ---- Botones ---- */
.btn{
  --btn-bg:var(--aw-coral);--btn-fg:#fff;--btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 22px;border-radius:var(--radius-pill);
  background:var(--btn-bg);color:var(--btn-fg);border:1.5px solid var(--btn-bd);
  font-weight:var(--weight-semibold);font-size:var(--text-sm);line-height:1;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(255,90,77,.28)}
.btn:active{transform:translateY(0)}
.btn .arw{transition:transform var(--dur-1) var(--ease)}
.btn:hover .arw{transform:translateX(3px)}
.btn--lg{padding:17px 28px;font-size:var(--text-base)}

.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:var(--border-strong)}
.btn--ghost:hover{--btn-bd:var(--ink);box-shadow:none}
.btn--tertiary{--btn-bg:transparent;--btn-fg:var(--ink);--btn-bd:transparent;padding-inline:6px}
.btn--tertiary:hover{--btn-fg:var(--aw-coral);box-shadow:none;transform:none}

.btn--light{--btn-bg:#fff;--btn-fg:var(--ink)}
.btn--light:hover{box-shadow:0 12px 28px rgba(0,0,0,.22)}
.on-dark .btn--ghost{--btn-fg:var(--on-dark);--btn-bd:var(--border-dark)}
.on-dark .btn--ghost:hover{--btn-bd:#fff}

/* ---- Chips (categorías / filtros) ---- */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border);background:#fff;
  font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--text-muted);
  transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease),background var(--dur-1) var(--ease);
}
.chip:hover{border-color:var(--border-strong);color:var(--ink)}
.chip[aria-pressed="true"],.chip.is-active{background:var(--ink);border-color:var(--ink);color:#fff}

/* ---- Pill de estado ---- */
.pill{
  display:inline-flex;align-items:center;gap:7px;
  padding:5px 12px;border-radius:var(--radius-pill);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  border:1.5px solid var(--border);color:var(--text-muted);background:#fff;
}
.pill::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.pill--live{color:var(--aw-success);border-color:color-mix(in srgb,var(--aw-success) 30%,#fff)}
.pill--soon{color:var(--aw-warning);border-color:color-mix(in srgb,var(--aw-warning) 30%,#fff)}
.pill--beta{color:var(--aw-info);border-color:color-mix(in srgb,var(--aw-info) 30%,#fff)}

/* ---- Card genérica ---- */
.card{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:var(--space-4);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out);
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--border-strong)}

/* ---- Formulario / inputs ---- */
.field{display:flex;gap:10px;flex-wrap:wrap;margin-top:var(--space-3)}
.field input{
  flex:1 1 260px;min-width:0;
  padding:15px 18px;border-radius:var(--radius-pill);
  border:1.5px solid var(--border-strong);background:#fff;color:var(--ink);
  font:inherit;font-size:var(--text-base);
  transition:border-color var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease);
}
.field input::placeholder{color:var(--text-faint)}
.field input:focus-visible{outline:none;border-color:var(--aw-blue);box-shadow:0 0 0 4px color-mix(in srgb,var(--aw-blue) 16%,transparent)}
.form-note{color:var(--text-muted);font-size:var(--text-sm);margin-top:var(--space-2)}
.form-note[data-state="error"]::after{content:" — no pudimos enviar, inténtalo de nuevo.";color:var(--aw-error)}
.form-ok[hidden]{display:none}
.form-ok{color:var(--aw-success);font-weight:var(--weight-semibold);margin-top:var(--space-2)}

/* On-dark variants */
.on-dark .field input{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.22);color:#fff}
.on-dark .field input::placeholder{color:var(--on-dark-muted)}
.on-dark .form-note{color:var(--on-dark-muted)}