/* css/components.css — botones, cards, forms, chips, divisor diagonal. */

/* === Botones === */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 14px 26px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  user-select: none;
  border: 1px solid transparent;
  transition:
    transform var(--transition-base),
    background var(--transition-base),
    color var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

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

.btn-primary {
  background: var(--brand-magenta);
  color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(233, 30, 99, 0.32);
}
.btn-primary:hover {
  background: #c81857;
  box-shadow: 0 10px 24px rgba(233, 30, 99, 0.42);
}

.btn-secondary {
  background: transparent;
  color: var(--fg-primary);
  border-color: var(--fg-primary);
}
.btn-secondary:hover {
  background: var(--fg-primary);
  color: #FFFFFF;
}

.btn-secondary-light {
  background: transparent;
  color: #FFFFFF;
  border-color: #FFFFFF;
}
.btn-secondary-light:hover {
  background: #FFFFFF;
  color: var(--fg-primary);
}

.btn-white {
  background: #FFFFFF;
  color: var(--brand-magenta);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.btn-white:hover {
  background: var(--bg-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
}

.btn-large {
  padding: 18px 34px;
  font-size: 17px;
}

.btn-small {
  padding: 10px 18px;
  font-size: 13px;
}

/* Variantes por modelo (para fichas / CTAs específicos) */
.btn-model-a3 { background: var(--model-a3); color: var(--model-a3-fg); }
.btn-model-a5 { background: var(--model-a5); color: var(--model-a5-fg); }
.btn-model-a6 { background: var(--model-a6); color: var(--model-a6-fg); }
.btn-model-a8 { background: var(--model-a8); color: var(--model-a8-fg); }

/* === Cards === */

.card {
  background: var(--bg-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.card-model {
  --card-color: var(--brand-magenta);
  background: var(--card-color);
  color: #FFFFFF;
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 380px;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.card-model:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 24px 56px color-mix(in srgb, var(--card-color) 35%, transparent);
}
.card-model.is-yellow { color: var(--fg-primary); }

.card-model-a3 { --card-color: var(--model-a3); }
.card-model-a5 { --card-color: var(--model-a5); }
.card-model-a6 { --card-color: var(--model-a6); }
.card-model-a8 { --card-color: var(--model-a8); }

/* === Forms (esqueleto base, formulario completo en sesión futura) === */

.label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: var(--space-2);
  color: var(--fg-primary);
}

.input,
.textarea,
.select {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: 16px;
  background: var(--bg-primary);
  color: var(--fg-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--brand-magenta);
  box-shadow: 0 0 0 3px rgba(233, 30, 99, 0.18);
}

.checkbox {
  width: 18px;
  height: 18px;
  accent-color: var(--brand-magenta);
}

.field-error {
  color: var(--danger);
  font-size: 13px;
  margin-top: var(--space-1);
}

/* === Chips === */

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 14px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--bg-soft);
  color: var(--fg-primary);
  border: 1px solid var(--border-subtle);
}

.chip-magenta { background: var(--brand-magenta); color: #FFFFFF; border-color: transparent; }
.chip-orange  { background: var(--brand-orange);  color: #FFFFFF; border-color: transparent; }
.chip-yellow  { background: var(--brand-yellow);  color: var(--fg-primary); border-color: transparent; }
.chip-cyan    { background: var(--brand-cyan);    color: #FFFFFF; border-color: transparent; }

/* === Diagonal divider entre secciones === */

.diagonal-divider {
  position: relative;
  height: 80px;
  background: inherit;
  clip-path: polygon(0 0, 100% 60%, 100% 100%, 0 100%);
}

.diagonal-divider-inverted {
  clip-path: polygon(0 40%, 100% 0, 100% 100%, 0 100%);
}

/* Campo trampa antispam: fuera de la vista, sin ocupar espacio. No usar display:none
   (algunos robots se lo saltan precisamente por eso). */
.hp-field {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* === Preguntas frecuentes (scripts/build-seo.cjs y guías) === */
.faq-section {
  padding: clamp(56px, 7vw, 96px) 0;
  position: relative;
}
.faq-section--soft { background: var(--bg-soft); }
.faq-container { max-width: 860px; position: relative; z-index: 2; }
.faq-header { margin-bottom: var(--space-6); }
.faq-eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-muted);
  margin-bottom: var(--space-3);
}
.faq-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0;
}
.faq-list { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--font-display);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 600;
  line-height: 1.35;
  color: var(--fg-primary);
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { color: var(--brand-burgundy); }
.faq-q:focus-visible { outline: 2px solid var(--fg-primary); outline-offset: 4px; border-radius: 4px; }
.faq-icon {
  position: relative;
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  border: 1px solid var(--border);
  border-radius: 999px;
}
.faq-icon::before,
.faq-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform var(--transition-base);
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-item[open] .faq-icon::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq-a { padding: 0 var(--space-10) var(--space-5) 0; }
.faq-a p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--fg-muted);
}
.faq-a a {
  color: var(--fg-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.faq-a a:hover { color: var(--brand-burgundy); }
@media (max-width: 640px) {
  .faq-a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-icon::before, .faq-icon::after { transition: none; }
}