/* Aspecto del formulario común de la llamada final (formulario-captacion.js). Escrito el 09-11-2026.

   Cada producto copia este fichero y cambia su aspecto con las variables de abajo, en su propia hoja de estilo:
     .capt { --capt-acento: #1895BD; --capt-papel: #F7F8F7; }
   Lo demás (tamaños, espacios, estados de error y pulsado, móvil) es común: si un producto necesita otra cosa, se pide
   en el chat de captación. Los valores por defecto son los de la marca (Ecoleng\DESIGN.md). Las letras (Roboto y
   Barlow Semi Condensed) las carga cada producto, como ya hace; sin ellas, sale la letra del sistema. */
.capt {
  --capt-tinta: #222221;
  --capt-tinta-suave: #53646c;
  --capt-papel: #ffffff;
  --capt-fondo-campo: #ffffff;
  --capt-borde-campo: #b4c3ca;
  --capt-linea: #e3e7e9;
  --capt-acento: #8a2976;            /* botón, pulsado y casillas */
  --capt-acento-claro: #f7edf5;
  --capt-acento-hover: #1fa7a2;      /* el del botón principal de la marca */
  --capt-sobre-acento: #ffffff;
  --capt-enlace: #0e6e8c;            /* el azul de la marca, oscurecido para que se lea en letra pequeña */
  --capt-error: #8a2976;
  --capt-exito: #1fa7a2;
  --capt-exito-claro: #e9f6f5;
  --capt-nota: #eaf3f5;              /* fondo de la frase de encima del botón */
  --capt-titulo-fondo: #8a2976;
  --capt-titulo-tinta: #ffffff;
  --capt-letra: Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --capt-letra-titulos: "Barlow Semi Condensed", "Arial Narrow", Arial, sans-serif;
  --capt-radio: 8px;
  --capt-sombra: 0 2px 12px rgba(0, 0, 0, .08);

  /* Se adapta al ancho de su sitio, no al de la pantalla (abajo, @container): así sale bien también en una columna
     estrecha del ordenador. Por eso la sección tiene que ocupar el ancho de su sitio (un bloque normal o un elemento
     estirado de una caja flexible), no encogerse a lo que mide su contenido. */
  container-type: inline-size;
  margin: 0;
  background: var(--capt-papel);
  color: var(--capt-tinta);
  font-family: var(--capt-letra);
  border: 1px solid var(--capt-linea);
  border-radius: var(--capt-radio);
  box-shadow: var(--capt-sombra);
  overflow: hidden;
  text-align: left;
}
.capt *, .capt *::before, .capt *::after { box-sizing: border-box; }
.capt [hidden] { display: none !important; }
.capt a { color: var(--capt-enlace); text-underline-offset: 3px; }

.capt__titulo {
  margin: 0; padding: 20px 28px 18px;
  background: var(--capt-titulo-fondo); color: var(--capt-titulo-tinta);
  font: 600 30px/1.1 var(--capt-letra-titulos); letter-spacing: 0;
}
.capt__titulo:focus { outline: none; }
.capt__texto { margin: 0; padding: 18px 28px 0; font-size: 17px; line-height: 1.6; }
.capt__form { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 22px 28px 28px; }

/* Campos */
.capt-campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; margin: 0; }
.capt-campo label, .capt-campo__titulo { font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--capt-tinta); }
.capt-campo input, .capt-campo textarea {
  display: block; width: 100%; min-height: 48px; margin: 0; padding: 11px 12px;
  border: 1px solid var(--capt-borde-campo); border-radius: var(--capt-radio);
  background: var(--capt-fondo-campo); color: var(--capt-tinta);
  font: 16px/1.4 var(--capt-letra);   /* 16 px: así el iPhone no amplía la página al escribir */
}
.capt-campo textarea { min-height: 76px; resize: vertical; }
.capt-campo input:focus-visible, .capt-campo textarea:focus-visible { outline: 2px solid var(--capt-enlace); outline-offset: 1px; border-color: var(--capt-enlace); }
.capt-campo--error input, .capt-campo--error textarea { border-color: var(--capt-error); box-shadow: inset 3px 0 var(--capt-error); }
.capt-campo__ayuda { margin: 0; font-size: 14px; line-height: 1.5; color: var(--capt-tinta-suave); }
.capt-campo__error { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--capt-error); }

/* «Para qué»: botones que se marcan y desmarcan */
.capt-etiquetas { display: flex; flex-wrap: wrap; gap: 8px; }
.capt-etiqueta {
  min-height: 44px; margin: 0; padding: 9px 14px;
  border: 1px solid var(--capt-borde-campo); border-radius: 999px;
  background: var(--capt-papel); color: var(--capt-tinta);
  font: 15px/1.2 var(--capt-letra); cursor: pointer;
}
.capt-etiqueta[aria-pressed="true"] { background: var(--capt-acento-claro); border-color: var(--capt-acento); color: var(--capt-acento); font-weight: 500; }

/* Nivel: la frase, el botón que despliega y la lista */
.capt-nivel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.capt-nivel__frase { margin: 0; font-size: 16px; line-height: 1.45; }
.capt-nivel__abrir {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: 0; padding: 6px 0;
  border: 0; background: none; color: var(--capt-enlace);
  font: 500 16px/1.3 var(--capt-letra); text-align: left; cursor: pointer;
}
.capt-nivel__abrir-texto { text-decoration: underline; text-underline-offset: 3px; }
.capt-nivel__abrir::after {
  content: ""; flex: none; width: 7px; height: 7px; margin-left: 2px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .15s ease;
}
.capt-nivel__abrir[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.capt-nivel__lista { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; margin: 4px 0 0; padding: 0; border: 0; }
.capt-nivel--obligatorio .capt-nivel__lista { margin: 0; }
/* Sin nivel de partida, el título de la lista se ve como la etiqueta de un campo (flotado, para que cuente como un
   elemento más de la lista y respete su separación). */
.capt-nivel__titulo { float: left; width: 100%; margin: 0 0 2px; padding: 0; font-weight: 500; font-size: 16px; line-height: 1.35; color: var(--capt-tinta); }
.capt-nivel__lista.capt-campo--error .capt-opcion { border-color: var(--capt-error); box-shadow: inset 3px 0 var(--capt-error); }
.capt-opcion {
  display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 10px 14px;
  border: 1px solid var(--capt-linea); border-radius: var(--capt-radio);
  background: var(--capt-papel); font-size: 15px; line-height: 1.35; cursor: pointer;
}
.capt-opcion input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--capt-acento); }
.capt-opcion:has(input:checked) { border-color: var(--capt-acento); background: var(--capt-acento-claro); }
.capt-opcion__nivel { color: var(--capt-tinta-suave); white-space: nowrap; }

/* Boletín: separado de las preguntas por una línea fina; es el permiso para escribir, no una opción más */
.capt__boletin { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 24px; border-top: 1px solid var(--capt-linea); }
.capt-casilla { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; cursor: pointer; }
.capt-casilla input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--capt-acento); }
.capt__aviso { margin: 0; padding-left: 32px; font-size: 13px; line-height: 1.5; color: var(--capt-tinta-suave); }
.capt__plazo { margin: 0; padding: 10px 14px; border-radius: 3px; background: var(--capt-nota); font-size: 14px; line-height: 1.5; }

/* Variante con recompensa (Las llaves): la casilla de la lección y sus campos */
.capt-casilla--leccion { font-weight: 500; font-size: 16px; }
.capt__leccion { display: flex; flex-direction: column; gap: 20px; padding-left: 16px; border-left: 3px solid var(--capt-acento-claro); }
.capt__leccion-texto { margin: 0; font-size: 15px; line-height: 1.5; color: var(--capt-tinta-suave); }

/* Botón, mensajes y campo trampa */
.capt__boton {
  align-self: flex-start; min-width: 240px; min-height: 52px; margin: 0; padding: 14px 28px;
  border: 0; border-radius: var(--capt-radio);
  background: var(--capt-acento); color: var(--capt-sobre-acento);
  font: 500 18px/1.2 var(--capt-letra); cursor: pointer;
}
.capt__boton:hover { background: var(--capt-acento-hover); }
.capt__boton:disabled { opacity: .7; cursor: progress; }
.capt-etiqueta:focus-visible, .capt-nivel__abrir:focus-visible, .capt__boton:focus-visible, .capt-opcion:focus-within, .capt-casilla:focus-within {
  outline: 2px solid var(--capt-enlace); outline-offset: 2px;
}
.capt__error-envio { margin: 0; font-size: 14px; font-weight: 500; line-height: 1.5; color: var(--capt-error); }
.capt-trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.capt-oculto { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.capt__hecho {
  margin: 22px 28px 28px; padding: 16px 18px;
  border-left: 3px solid var(--capt-exito); background: var(--capt-exito-claro);
  font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--capt-tinta);
}
.capt__hecho:focus { outline: none; }

@container (max-width: 560px) {
  .capt__titulo { padding: 18px 20px 16px; font-size: 26px; }
  .capt__texto { padding: 16px 20px 0; font-size: 16px; }
  .capt__form { padding: 20px 20px 24px; }
  .capt__boton { align-self: stretch; min-width: 0; }
  .capt__hecho { margin: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .capt-nivel__abrir::after { transition: none; }
}