/* ============================================================================
   components.css — botones, cards, badges, accordion, formularios, CTA flotante
   ========================================================================== */

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
  padding: 0.85rem 1.5rem; border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.01em;
  line-height: 1; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t), background var(--t), color var(--t), border-color var(--t);
  will-change: transform;
}
.btn svg { width: 18px; height: 18px; }
.btn:active { transform: translateY(1px) scale(0.99); }

.btn-primary {
  background: var(--su-blue-cyan); color: var(--su-black);
  box-shadow: 0 10px 30px -10px var(--su-glow), inset 0 0 0 1px rgba(255,255,255,0.2);
}
.btn-primary:hover { box-shadow: 0 16px 44px -12px var(--su-glow); transform: translateY(-2px); }

.btn-ghost { color: var(--su-text-strong); border: 1px solid var(--su-border); background: var(--su-surface); }
.btn-ghost:hover { border-color: var(--su-cyan); background: var(--su-surface-2); transform: translateY(-2px); }

.btn-link { color: var(--su-cyan); padding-inline: 0; }
.btn-link::after { content: "→"; transition: transform var(--t-fast); }
.btn-link:hover::after { transform: translateX(4px); }

.btn-lg { padding: 1.05rem 1.9rem; font-size: var(--step-0); }
.btn-block { width: 100%; }

/* ---------- Pills / badges ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 0.45rem;
  padding: 0.4rem 0.85rem; border-radius: var(--radius-pill);
  border: 1px solid var(--su-border); background: var(--su-surface);
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--su-text);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--su-cyan); box-shadow: 0 0 10px var(--su-cyan); }
.pill .dot.live { animation: pulse-dot 1.8s var(--ease) infinite; }

.tag { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--su-cyan); }

/* ---------- Card glass base ---------- */
.card {
  position: relative; border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid var(--su-border);
  padding: 1.6rem;
  overflow: hidden;
  transition: transform var(--t) var(--ease), border-color var(--t), box-shadow var(--t);
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, var(--su-glow), transparent 40%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--t);
}
.card:hover { transform: translateY(-6px); border-color: rgba(0,217,255,0.35); box-shadow: var(--shadow-card); }
.card:hover::before { opacity: 1; }

/* ---------- Sector / Service cards ---------- */
.tile-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(248px, 1fr)); }
.tile {
  display: flex; flex-direction: column; gap: 0.5rem; min-height: 172px;
  border-radius: var(--radius); padding: 1.3rem;
  background: var(--su-surface); border: 1px solid var(--su-border);
  transition: transform var(--t) var(--ease), border-color var(--t), background var(--t), box-shadow var(--t);
}
.tile:hover { transform: translateY(-5px); border-color: rgba(0,217,255,0.4); background: var(--su-surface-2); box-shadow: 0 20px 44px -26px var(--su-glow); }
.tile .tile-index { font-family: var(--font-mono); font-size: 0.74rem; color: var(--su-cyan); letter-spacing: 0.1em; }
.tile .tile-tag { font-family: var(--font-mono); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--su-text-dim); }
.tile h3 { font-size: 1.08rem; margin-top: 0.1rem; }
.tile p { font-size: 0.86rem; color: var(--su-text-dim); margin-top: auto; }
.tile .tile-go { margin-top: 0.6rem; color: var(--su-cyan); font-size: 0.8rem; font-weight: 600; opacity: 0; transform: translateX(-6px); transition: opacity var(--t), transform var(--t); }
.tile:hover .tile-go { opacity: 1; transform: translateX(0); }

/* ---------- Feature / step cards ---------- */
.feature { display: flex; flex-direction: column; gap: 0.7rem; }
.feature .ic {
  width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center;
  background: var(--su-surface-2); border: 1px solid var(--su-border); color: var(--su-cyan);
}
.feature .ic svg { width: 24px; height: 24px; }

/* ---------- Plan cards ---------- */
.plans { display: grid; gap: 1.2rem; grid-template-columns: repeat(3, 1fr); align-items: stretch; }
.plan { display: flex; flex-direction: column; }
.plan.featured { border-color: rgba(0,217,255,0.45); background: linear-gradient(180deg, rgba(0,167,255,0.08), rgba(255,255,255,0.015)); }
.plan .plan-name { font-family: var(--font-display); font-size: 1.4rem; color: var(--su-text-strong); }
.plan .plan-for { color: var(--su-text-dim); font-size: 0.84rem; margin-bottom: 1rem; }
.plan ul { display: flex; flex-direction: column; gap: 0.6rem; margin: 1rem 0 1.5rem; }
.plan li { display: flex; gap: 0.6rem; font-size: 0.88rem; }
.plan li::before { content: ""; flex: 0 0 18px; height: 18px; margin-top: 2px; border-radius: 50%; background: var(--su-blue-cyan); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; }
.plan .btn { margin-top: auto; }
.plan .badge-best { position: absolute; top: 1.2rem; right: 1.2rem; }

/* ---------- Accordion (FAQ) ---------- */
.accordion-item { border-bottom: 1px solid var(--su-border); }
.accordion-trigger { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.2rem 0; text-align: left; color: var(--su-text-strong); font-family: var(--font-display); font-size: 1.05rem; }
.accordion-trigger .ico { flex: 0 0 22px; height: 22px; position: relative; }
.accordion-trigger .ico::before, .accordion-trigger .ico::after { content: ""; position: absolute; inset: 10px 0; background: var(--su-cyan); transition: transform var(--t); }
.accordion-trigger .ico::after { transform: rotate(90deg); }
.accordion-item.open .ico::after { transform: rotate(0); }
.accordion-panel { max-height: 0; overflow: hidden; transition: max-height var(--t) var(--ease); }
.accordion-panel p { padding-bottom: 1.2rem; color: var(--su-text-dim); }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1rem; }
.field label { font-size: 0.82rem; color: var(--su-text); font-weight: 500; }
.field input, .field select, .field textarea {
  width: 100%; padding: 0.8rem 1rem; border-radius: 12px;
  background: rgba(0,0,0,0.3); border: 1px solid var(--su-border); color: var(--su-text-strong);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--su-cyan); box-shadow: 0 0 0 3px rgba(0,217,255,0.12); outline: none; }
.field textarea { resize: vertical; min-height: 110px; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 620px){ .form-grid { grid-template-columns: 1fr; } }

/* ---------- CTA flotante + WhatsApp ---------- */
.float-actions { position: fixed; right: clamp(1rem, 2vw, 2rem); bottom: clamp(1rem, 2vw, 2rem); z-index: 80; display: flex; flex-direction: column; gap: 0.7rem; }
.fab {
  width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center;
  box-shadow: 0 12px 30px -8px rgba(0,0,0,0.6); transition: transform var(--t) var(--ease);
}
.fab:hover { transform: scale(1.08) translateY(-2px); }
.fab.wa { background: #25D366; color: #04140a; }
.fab.demo { background: var(--su-blue-cyan); color: var(--su-black); }
.fab svg { width: 26px; height: 26px; }

/* ---------- Banner ético ---------- */
.ethic-note {
  border-left: 3px solid var(--su-cyan);
  background: var(--su-surface);
  padding: 1.1rem 1.3rem; border-radius: 0 12px 12px 0;
  font-size: 0.9rem; color: var(--su-text);
}
.ethic-note strong { color: var(--su-text-strong); }

/* ---------- Stats ---------- */
.stat .num { font-family: var(--font-display); font-size: var(--step-3); color: var(--su-text-strong); line-height: 1; }
.stat .num small { font-size: 0.4em; color: var(--su-cyan); vertical-align: super; }
.stat .lbl { font-size: 0.82rem; color: var(--su-text-dim); margin-top: 0.3rem; }