/* =========================================================
   Ivanagro S.A. — Formulario de leads
   Sistema de diseño: TODOS los colores y tamaños salen de :root.
   ⚠️ PALETA APROXIMADA inspirada en la identidad verde de Ivanagro.
   Cuando el cliente entregue el manual de marca, basta con
   cambiar estas variables para re-pintar todo el sitio.
   ========================================================= */
:root {
  --brand-900: #14421f;  /* verde bosque, fondos oscuros y footer */
  --brand-600: #2e7d32;  /* verde principal Ivanagro (aprox.) */
  --brand-500: #43a047;  /* hover / acentos */
  --brand-100: #e8f3e9;  /* fondos suaves, chips */
  --ink:       #1c2b21;  /* texto principal */
  --muted:     #5c6b5e;  /* texto secundario, ayudas */
  --paper:     #ffffff;
  --surface:   #f6f8f6;  /* fondo de página */
  --error:     #c62828;
  --success:   #2e7d32;
  --whatsapp:  #1faa53;  /* botón "Continuar por WhatsApp" */
  --border:    #d5dfd6;  /* bordes de campos */
  --radius:    14px;
  --shadow:    0 8px 24px rgba(20, 66, 31, 0.10);

  --fuente-titular: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
  --fuente-cuerpo: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--fuente-cuerpo);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--brand-600); }

.contenedor {
  width: min(100% - 2rem, 1120px);
  margin-inline: auto;
}

/* Foco visible en TODOS los controles */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.req { color: var(--error); font-weight: 600; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--surface);
  padding: 2.5rem 0 4.5rem;
  text-align: center;
}

/* Logo centrado en la cabecera del hero */
.hero-logo {
  display: inline-block;
  margin-bottom: 1.25rem;
}

.hero-logo img { height: 56px; width: auto; }

.hero h1 {
  margin: 0 auto;
  max-width: 22ch;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  line-height: 1.15;
  color: var(--brand-900);
}

.hero-sub {
  margin: 0.75rem auto 0;
  max-width: 52ch;
  color: var(--muted);
}

.hero-onda {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  width: 100%;
  height: 70px;
  pointer-events: none;
}

.onda-suave  { fill: var(--brand-100); }
.onda-fuerte { fill: var(--brand-600); opacity: 0.12; }

/* ---------- Tarjeta del formulario ---------- */
.seccion-form { padding: 0 0 3.5rem; }

.card {
  position: relative;
  max-width: 720px;
  margin: -1.5rem auto 0; /* la tarjeta "pisa" la onda del hero */
  background: var(--paper);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.5rem 1.25rem 1.75rem;
}

.card-titulo {
  margin: 0;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--brand-900);
}

.card-ayuda {
  margin: 0.25rem 0 1.25rem;
  font-size: 0.9rem;
  color: var(--muted);
}

/* ---------- Campos ---------- */
#form-leads {
  display: grid;
  grid-template-columns: 1fr; /* móvil: una columna */
  gap: 1rem 1.25rem;
}

.campo { display: flex; flex-direction: column; margin: 0; }

.campo label,
.lineas legend {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 0.35rem;
}

.campo input[type="text"],
.campo input[type="email"],
.campo input[type="tel"],
.campo textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: calc(var(--radius) / 2);
  padding: 0.7rem 0.85rem;
  min-height: 44px; /* área táctil */
  width: 100%;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.campo textarea { resize: vertical; min-height: 110px; }

.campo input::placeholder,
.campo textarea::placeholder { color: var(--muted); opacity: 0.75; }

.campo input:focus,
.campo textarea:focus {
  border-color: var(--brand-600);
  box-shadow: 0 0 0 3px var(--brand-100);
  outline: none;
}

/* Estado de error */
.campo [aria-invalid="true"] {
  border-color: var(--error);
}

.campo-error {
  margin: 0.3rem 0 0;
  min-height: 0;
  font-size: 0.85rem;
  color: var(--error);
}

.campo-error:empty { display: none; }

.contador {
  margin: 0.3rem 0 0;
  font-size: 0.8rem;
  color: var(--muted);
  text-align: right;
}

/* ---------- Radio-cards de líneas (elemento firma) ---------- */
.lineas {
  border: 0;
  padding: 0;
  min-inline-size: 0;
}

.lineas legend { padding: 0; }

.lineas-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* móvil: 2×3 */
  gap: 10px;
  margin-top: 0.35rem;
}

.linea-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 84px;
  padding: 0.8rem 0.5rem;
  background: var(--paper);
  border: 1.5px solid var(--border);
  border-radius: calc(var(--radius) / 1.4);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s ease, background-color 0.15s ease,
              transform 0.15s ease;
}

/* La 5ª tarjeta (Insumos) va sola en la última fila, centrada */
.linea-card:nth-child(5) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - 5px);
}

.linea-card svg {
  width: 30px;
  height: 30px;
  color: var(--muted);
  transition: color 0.15s ease;
}

.linea-card span {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink);
}

/* El radio real queda oculto visualmente pero sigue siendo funcional
   y accesible (foco, teclado, lectores de pantalla) */
.linea-card input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  clip-path: inset(50%);
  overflow: hidden;
  white-space: nowrap;
}

.linea-card:hover { border-color: var(--brand-500); }

.linea-card:has(input:checked) {
  background: var(--brand-100);
  border-color: var(--brand-600);
}

.linea-card:has(input:checked) svg { color: var(--brand-600); }
.linea-card:has(input:checked) span { color: var(--brand-900); font-weight: 600; }

.linea-card:has(input:focus-visible) {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
}

/* ---------- Checkbox de autorización ---------- */
.campo-check .check-label {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 0;
}

.campo-check input[type="checkbox"] {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 0.1rem;
  accent-color: var(--brand-600);
  cursor: pointer;
}

/* ---------- Honeypot (invisible para humanos) ---------- */
.hp {
  position: absolute !important;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font: inherit;
  font-weight: 600;
  min-height: 48px;
  padding: 0.75rem 1.5rem;
  border-radius: calc(var(--radius) / 1.4);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, border-color 0.15s ease,
              transform 0.1s ease;
}

.btn:active { transform: scale(0.98); }

.btn-primario {
  background: var(--brand-600);
  color: var(--paper);
  width: 100%; /* móvil: ancho completo */
}

.btn-primario:hover { background: var(--brand-500); }

.btn-primario:disabled {
  opacity: 0.65;
  cursor: wait;
}

.btn-secundario {
  background: var(--paper);
  color: var(--brand-600);
  border-color: var(--brand-600);
}

.btn-secundario:hover { background: var(--brand-100); }

.btn-whatsapp {
  background: var(--whatsapp);
  color: var(--paper);
}

.btn-whatsapp:hover { filter: brightness(1.08); }

.btn-whatsapp svg { width: 22px; height: 22px; flex: none; }

/* ---------- Alerta de envío fallido ---------- */
.form-alert {
  background: color-mix(in srgb, var(--error) 8%, var(--paper));
  border: 1.5px solid var(--error);
  border-radius: calc(var(--radius) / 1.4);
  padding: 0.9rem 1rem;
}

.form-alert p { margin: 0 0 0.7rem; color: var(--ink); font-size: 0.92rem; }

/* ---------- Estado de éxito ---------- */
.exito {
  text-align: center;
  padding: 1.5rem 0.5rem;
}

.exito-check {
  width: 72px;
  height: 72px;
  margin-inline: auto;
  color: var(--success);
}

.exito-check circle,
.exito-check path {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: trazo 0.7s ease forwards;
}

.exito-check path { animation-delay: 0.35s; }

@keyframes trazo { to { stroke-dashoffset: 0; } }

.exito h2 {
  margin: 1rem 0 0.25rem;
  font-family: var(--fuente-titular);
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--brand-900);
}

.exito p { margin: 0; color: var(--muted); }

.exito-acciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
  align-items: stretch;
}

/* =========================================================
   Responsive: ≥ 640px y ≥ 768px (mobile-first)
   ========================================================= */
@media (min-width: 640px) {
  .btn-primario { width: auto; min-width: 220px; }
  .acciones { display: flex; }
  .exito-acciones { flex-direction: row; justify-content: center; }
}

@media (min-width: 768px) {
  .card { padding: 2.25rem 2.5rem 2.5rem; }

  /* Campos cortos en dos columnas: nombre/empresa, email/teléfono, ciudad/producto */
  #form-leads { grid-template-columns: 1fr 1fr; }
  .campo--full { grid-column: 1 / -1; }

  /* Radio-cards en fila de 5 */
  .lineas-grid { grid-template-columns: repeat(5, 1fr); }
  .linea-card:nth-child(5) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }

}

/* ---------- Accesibilidad: movimiento reducido ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
  /* El check de éxito se muestra completo, sin animación */
  .exito-check circle,
  .exito-check path { stroke-dashoffset: 0; }
}