@import url("./landing-form.css");

/* AMC landing theme
 * La identidad visual vive separada de la estructura para mantener el layout independiente.
 */
:root {
  --accent: #f2b705;
  --accent-2: #ffd75d;
  --brand-green: #0b675f;
}

/* Logo AMC original: sin filtros ni recoloreado. El recorte circular elimina
 * el fondo negro cuadrado exterior sin alterar el arte ni sus colores. */
.brand-logo {
  filter: none;
  mix-blend-mode: normal;
  opacity: 1;
  background: transparent;
  border-radius: 50%;
  clip-path: circle(49% at 50% 50%);
}

/* Las imágenes mantienen la paleta oscura de la landing y reciben un marco
 * verde AMC un poco más visible, con brillo exterior moderado. */
.hero-card,
.visual {
  border-color: rgba(11, 103, 95, .84);
  box-shadow:
    0 0 0 1px rgba(11, 103, 95, .28),
    0 0 24px rgba(11, 103, 95, .22),
    var(--shadow);
}

.visual {
  box-shadow:
    0 0 0 1px rgba(11, 103, 95, .28),
    0 0 20px rgba(11, 103, 95, .20);
}

/* El verde AMC une botones secundarios y tarjetas sin competir con el amarillo. */
.btn.secondary {
  border-color: rgba(11, 103, 95, .78);
  box-shadow:
    0 0 0 1px rgba(11, 103, 95, .20),
    0 0 16px rgba(11, 103, 95, .14);
}

.card,
.step,
.proof-box,
.contact-form {
  border-color: rgba(11, 103, 95, .58);
  box-shadow:
    0 0 0 1px rgba(11, 103, 95, .12),
    0 0 14px rgba(11, 103, 95, .08);
  transition:
    transform .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background-color .24s ease;
}

/* Entrada discreta: sólo se activa cuando JS confirma soporte y respeta reduced-motion. */
html.reveal-enabled .reveal-item {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity .55s ease,
    transform .55s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    background-color .24s ease;
}

html.reveal-enabled .reveal-item.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .btn.secondary:hover {
    border-color: rgba(11, 103, 95, .98);
    box-shadow:
      0 0 0 1px rgba(11, 103, 95, .30),
      0 0 22px rgba(11, 103, 95, .22);
  }

  .card:hover,
  .step:hover,
  .proof-box:hover,
  .contact-form:hover,
  html.reveal-enabled .reveal-item.reveal-visible:hover {
    transform: translateY(-4px);
    border-color: rgba(11, 103, 95, .88);
    box-shadow:
      0 0 0 1px rgba(11, 103, 95, .22),
      0 10px 28px rgba(0, 0, 0, .22),
      0 0 20px rgba(11, 103, 95, .16);
  }
}

.btn {
  color: #111;
}

.btn:hover {
  color: #111;
}

.btn:focus-visible,
a:focus-visible {
  outline-color: rgba(242,183,5,.45);
}

.eyebrow {
  color: var(--accent);
}

.hero-chip {
  border-color: rgba(242,183,5,.42);
  color: #ffe59a;
}

.notice {
  background: #2a2310;
  border-color: rgba(242,183,5,.24);
  color: #ffe7a3;
}

.step::before {
  color: #111;
}

.cta {
  color: #111;
}

.cta .btn {
  background: #111;
  color: #fff;
}

.cta .btn:hover {
  background: #272727;
  color: #fff;
}

@media (prefers-reduced-motion: reduce) {
  html.reveal-enabled .reveal-item,
  html.reveal-enabled .reveal-item.reveal-visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
}